CODEWITHSUNDEEP
fluttergradient
cqw67692
cqw67692

Reputation: 1

Replicate Android gradient in Flutter

I have this gradient on Android:

<gradient
    android:angle="45.0"
    android:centerColor="#ffeeeeee"
    android:endColor="#ffbbbbbb"
    android:startColor="#ffcccccc" />

I want it to replicate it on flutter but I'm unable to do so. I have tried to use a LinearGradient but doesn't even come close to the one on Android.

I tried this:

  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    gradient: LinearGradient(
      colors: [
        Color(0xffeeeeee),
        Color(0xffcccccc),
        Color(0xffbbbbbb),
      ],
      begin: Alignment(-1.0, -4.0),
      end: Alignment(1.0, 4.0),
    ),
  ),

Thanks

Upvotes: 0

Views: 432

Answers (2)

Athul Sethu
Athul Sethu

Reputation: 447

Try to add gradient as: 

Container(height: 200,
            width: 350,
            decoration: BoxDecoration(
                color: Colors.white,
                gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Color.fromRGBO(0, 0, 0, 0.0),
                    Color.fromRGBO(0, 0, 0, 0.25),
                    Color.fromRGBO(0, 0, 0, 0.7),
                  ],
                  stops: [0.5, 0.7, 0.9],
                )),
          ),

Upvotes: 1

primo
primo

Reputation: 1472

You can do it like this

 return Scaffold(
      body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.red, Colors.orange],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight)),
          child: Container(
              )),
    );

For color code, do like this

Color hexToColor(String code) {
    return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
  }

Upvotes: 2

Related Questions