How to make a gradient shadow button in flutter?

Question

I have that button (screenshot at the bottom). Now I want to add a constant outer glow (Glows are gradient-shadows like depends on button). Is there another possibility to do this than saving it as .png in the assets folder? That would make much less work. Thank you!

Hello. Welcome to StackOverflow. Please make sure you share your code so that users can help you. Check out the question guidelines: https://stackoverflow.com/help/how-to-ask — J. S., Jan 14 '20 at 11:56
@Argen this might help you https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20 — Tinus Jackson, Jan 14 '20 at 11:58

score 0 · Answer 1 · answered Jan 14 '20 at 12:04

You can also try the following package gradient-widgets.

Add it to the dependencies in pubspec

dependencies:
  gradient_widgets: ^0.5.1

then,

import 'package:gradient_widgets/gradient_widgets.dart';

Then use it as follow

 GradientButton(
  child: Text('Gradient'),
  callback: () {},
  gradient: Gradients.backToFuture,
  shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

References

score 0 · Answer 2 · answered Jan 14 '20 at 12:19

you could try something like this ,playing with container box decoration properties such as gradient ,box shadow ...

 Container(
    height: 50,
    width: 200,child:Text("Login",textAlign:TextAlign.center),
    decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment(0.8, 0.0),
          colors: [Colors.blue, Colors.indigo, Colors.indigo],
          tileMode: TileMode.repeated,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.indigo,
            blurRadius: 4.0,
            spreadRadius: 4.0, 
            offset: Offset(
              0.0,
              0.0,
            ),
          ),
        ]),
  ),

result

score 0 · Answer 3 · answered Jan 14 '20 at 12:25

Container(
          height: 50.0,
          child: RaisedButton(
            onPressed: () {},
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            padding: EdgeInsets.all(0.0),
            child: Ink(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xff374ABE),
                    Color(0xff851EDF),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Container(
                constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
                alignment: Alignment.center,
                child: Text(
                  "Login",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),

score 0 · Accepted Answer · answered Dec 07 '20 at 09:46

0

Now I figured it out this problem by modifying BoxDecoration like this

answered Dec 07 '20 at 09:46

Zhu

387
4
15

How to make a gradient shadow button in flutter?

4 Answers4

References