Search code examples
flutterflutter-design

Make gradient effect at container flutter,


how make gradient at flutter like this image?, i think this gradient make like 3D Effect

I found this design at dribble


Solution

  • Try this:

            Container(
              width: 200,
              height: 240,
              child: Icon(Icons.android, size: 60, color: Colors.grey[100]),
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(42)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.deepOrange[400],
                      offset: const Offset(0, 20),
                      blurRadius: 30,
                      spreadRadius: -5,
                    ),
                  ],
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.deepOrange[200],
                        Colors.deepOrange[300],
                        Colors.deepOrange[500],
                        Colors.deepOrange[500],
                      ],
                      stops: const [
                        0.1,
                        0.3,
                        0.9,
                        1.0
                      ])),
            ),
    

    Result:

    enter image description here