CODEWITHSUNDEEP
flutterflutter-web
Daibaku
Daibaku

Reputation: 12616

Flutter how to fill gredient color for raised button?

I'm trying to render gradient button but on some device, gradient colors are not expanded like image below.

How can I fix this?
Thanks!

Code

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;
  const GradientButton({@required this.child, @required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      textColor: Colors.white,
      shape: StadiumBorder(),
      padding: const EdgeInsets.all(0.0),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[Color(0xff00F260), Color(0xff0575E6)],
          ),
        ),
        padding: EdgeInsets.all(8.0),
        child: child
        onPressed: onPressed,
      ),
    );
  }
}

Upvotes: 3

Views: 3395

Answers (3)

Navin Kumar
Navin Kumar

Reputation: 4027

Try this, material button with circular border

MaterialButton(
  onPressed: () {},
  child: Ink(
    padding: EdgeInsets.all(DEFAULT_PADDING),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: <Color>[
          SECONDARY_COLOR_SHADE_DARK_NEW,
          SECONDARY_COLOR_SHADE_LITE_NEW,
        ],
      ),
  ),
    child: Text(
      buttonText,
      style: Theme.of(context).textTheme.button.copyWith(fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    ),
  ),
  shape: CircleBorder(),
);

Upvotes: 0

J. S.
J. S.

Reputation: 9635

If you want to maintain the RaisedButton Widget and it's behaviour you can do this:

RaisedButton(
  textColor: Colors.white,
  shape: StadiumBorder(),
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: child,
  ),
  onPressed: onPressed,
),

But the padding around the container feels a bit like cheating. You could just wrap a container with a GestureDetector and then manipulate the container to your needs, like this:

GestureDetector(
  onTap: onPressed,
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: Text('Lets Go',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

Upvotes: 2

Crazy Lazy Cat
Crazy Lazy Cat

Reputation: 15073

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;

  const GradientButton({Key key, this.onPressed, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: const StadiumBorder(),
        gradient: LinearGradient(
          colors: [Color(0xff00F260), Color(0xff0575E6)],
        ),
      ),
      child: MaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        shape: const StadiumBorder(),
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}

You also get some MaterialButton effects like Ripple on tap, Disabled when onPressed is null, etc. For the elevation set shadows property in ShapeDecoration

shadows: [
  BoxShadow(
      color: Colors.black54,
      spreadRadius: 0.5,
      blurRadius: 3,
      offset: Offset(1, 1))
]

Upvotes: 6

Related Questions