Flutter – Gradient Button

Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty. Flutter gives the Gradient property to give one or more colors to the container. A sample image is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Rectangular Gradient Button

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}

Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
  return MaterialApp(home:);
}
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of App Bar, color, leading, and trailing icon.

  home: Scaffold(
       appBar: AppBar(title: Text('Gradient Button'),),
       body: Center(
      
       ),
     ),

Step 5: In the body of the scaffold, Create the container and gives it BoxDecoration, Further BoxDecoration contains the gradient that we need. gradient takes the Linear Gradient which needs two or more colors to show the gradient effect. Child takes the Elevated button that makes the container work like the button.

Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: Text('Gradient Button'),),
        body: Center(
          child: Container(
            height: 44.0,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Color.fromARGB(255, 2, 173, 102), Colors.blue])),
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent,
                  shadowColor: Colors.transparent),
              child: Text('Elevated Button'),
            ),
          ),
        ),
      ),
    );
  }
}

Output

Rectangular Gradient Button

Circular Gradient Button

To make the Circular Gradient Button, you have to change the two things in the previous code.

• shape: BoxShape.circle – Add the shape property into the BoxDecoration of the container.
• height : Increase the height of the container.

Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: Text('Gradient Button'),),
        body: Center(
          child: Container(
            height: 120.0,  // height of the button
            decoration: BoxDecoration(
                 shape: BoxShape.circle, // shape makes the circular button
                gradient: LinearGradient( // gives the Gradient color
                    colors: [Color.fromARGB(255, 2, 173, 102), Colors.blue])),
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent,
                  shadowColor: Colors.transparent),
              child: Text('Elevated Button'),
            ),
          ),
        ),
      ),
    );
  }
}

Output

Circular Gradient Button