How to Create a Gradient Button in Flutter

Buttons are important components of the mobile app user interface. Users always interact with buttons of a mobile app to trigger various actions. Because of these reasons, making a button beautiful and appealing has its own significance in mobile app development.

In some design scenarios, making a button with gradient colors will be much better than plain color buttons. So, how you create a button with gradient colors in Flutter?

Let’s use RaisedButton widget from material design. We will decorate the raised button with gradient colors. We use LinearGradient class for this purpose. The LinearGradient class is used by BoxDecoration class.

If you want to know how to add a button in flutter then check out this blog post.

So, here is the code to create a gradient button with two colors in Flutter:

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

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Gradient Button Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:
        RaisedButton(
          onPressed: () {},
          padding: const EdgeInsets.all(0.0),
          textColor: Colors.white,
          child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: <Color>[
                  Color(0xFF0D47A1),
                  Color(0xFF42A5F5),
                ],
              ),
            ),
            padding: const EdgeInsets.all(10.0),
            child: const Text(
              'Gradient Button',
              style: TextStyle(fontSize: 20)
            ),
          
        ),
      ),
      
    );
  }
}

Following is the output of this Flutter example:

gradient button flutter

Leave a Comment

Your email address will not be published. Required fields are marked *