Make a gradient button in Flutter

Gradient is coming back as a trend in UI design, I once have to create a button with a gradient background. Thanks to Flutter, everything seems to be easy with built-in Gradient. Unlike React Native, where you have to lean on 3rd party library.

In this article, I will show you how to create a Gradient background button using Flutter a Cross-platform framework that helps you build applications for iOS and Android.

GestureDetector

For the top level of the button, we use GestureDetector widget which helps us to detect user’s gestures such as tap, long tap, slide,… In case of a button, we only need tap.

.onTap: is where you define what the button does when user taps on it

Container

This widget is the child of the GestureDetector above. This will hold all of the UI configurations for the futton.

gradient: LinearGradient helps us build a gradient background with a list of colors. “Begin” and “end” will determine where the gradient start and finish.

boderRadius: BoderRadius create the radius for the button, this widget can help you to customize each corner with a different value.

boxShadow: this attribute is a list of BoxShadow widgets where you can declare multiple shadows for the button. In this case, I only need one shadow. I don’t want to make the button too fancy. BoxShadow widget will be configured with colors, offset – the x and y coordination of the shadow. And blurRadius let you choose how blurry the button is.

Child

Child widget of the container is where you specify what inside the button. In this post, it’s just a Text widget.

Source Code

GestureDetector(
              onTap: () {},
              child: Container(
                width: 300,
                height: 100,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.teal,
                      Colors.teal[200],
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      offset: Offset(5, 5),
                      blurRadius: 10,
                    )
                  ],
                ),
                child: Center(
                  child: Text(
                    'Press',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),