Flutter - Slider with Gradient

In this article, we will create a slide to confirm the button using the widget in Flutter. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

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 dependency into your pubspec yaml file

flutter pub add gradient_slide_to_act

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Step 3: Import the package into the main file

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

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

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

Step 4: Creating Stateful Widget

Now we have to make a stateful widget because our application does change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.

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();
 }
}

Step 5: Working with Scaffold

Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
 appBar: AppBar(
     title: Text('Gradient Slide to act'),
 ),
 body: 
),

Step 6: Now create the Gradient slide to act widget and assign its parameters like  - width, backgroundColor, gradient, etc.,

Center(
          child: GradientSlideToAct(
            width: 400,
            textStyle: TextStyle(color: Colors.white, fontSize: 15),
            backgroundColor: Color.fromARGB(255, 23, 99, 29),
            onSubmit: () {
             Print("Submitted!");
            },
            gradient:  LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color.fromARGB(255, 13, 194, 28),
                  Color.fromARGB(255, 8, 87, 5),
                ]),
          ),
        ),
      ),

Final Code:

import 'package:flutter/material.dart';
import 'package:gradient_slide_to_act/gradient_slide_to_act.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 Slide to Act'),
        ),
        body: Center(
          child: GradientSlideToAct(
            width: 400,
            textStyle: TextStyle(color: Colors.white, fontSize: 15),
            backgroundColor: Color.fromARGB(255, 23, 99, 29),
            onSubmit: () {
             Print("Submitted!");
            },
            gradient:  LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color.fromARGB(255, 13, 194, 28),
                  Color.fromARGB(255, 8, 87, 5),
                ]),
          ),
        ),
      ),
    );
  }
}

Output: