Question 76195 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create a gradient button with an image and text in Flutter?

I am working on a Flutter project and I want to create a button with a gradient background that includes both an image and text. However, I am not sure how to achieve this.

I have tried to make it like this image:

enter image description here

I have tried using the MaterialButton widget and setting its shape property to a RoundedRectangleBorder with gradient color, but I cannot figure out how to add the image and text to the button.

Can someone please provide me with an example of how to create a gradient button with an image and text in Flutter? Additionally, is there a way to customize the gradient colors of the button?

Tags:

2

Answers


  1. 0

    Just use Stack widget with 3 children (from lowest to highest):

    1. Image
    2. Container with decoration.gradient of semi-transparent colors
    3. Text

    If you wish you could wrap entire Stack in ClipRRect to add rounded corners.

    To add button behaviour, you could use custom GestureDetector or InkWell

    Login or Signup to reply.
  2. 0

    Desired Code:

    class ReusableButton extends StatelessWidget {
  const ReusableButton({
    super.key,
    required this.onTap,
    required this.imageUrl,
    required this.title,
    required this.gradientColors,
  });

  final void Function() onTap;
  final String imageUrl;
  final String title;
  final List<Color> gradientColors;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 16),
      child: GestureDetector(
        onTap: onTap,
        child: Stack(
          children: [
            SizedBox(
              width: 200,
              height: 120,
              child: Image.network(
                imageUrl,
                fit: BoxFit.cover,
              ),
            ),
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                gradient: LinearGradient(
                  colors: gradientColors,
                ),
              ),
              width: 200,
              height: 120,
              alignment: Alignment.center,
              child: Text(
                title,
                style: const TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    Usage:

    Row(
  children: [
    ReusableButton(
      onTap: () {},
      imageUrl: 'Your image URL...',
      title: 'Your title...',
      gradientColors: <Color>[
        Colors.red.withOpacity(0.7),
        Colors.green.withOpacity(0.7),
        Colors.blue.withOpacity(0.7),
      ],
    ),
    ReusableButton(
      onTap: () {},
      imageUrl: 'Your image URL...',
      title: 'Your title...',
      gradientColors: <Color>[
        Colors.red.withOpacity(0.7),
        Colors.green.withOpacity(0.7),
      ],
    ),
    ReusableButton(
      onTap: () {},
      imageUrl: 'Your image URL...',
      title: 'Your title...',
      gradientColors: <Color>[
        Colors.blue.withOpacity(0.7),
        Colors.blue.withOpacity(0.7),
      ],
    ),
  ],
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search