Flutter Create Gradient Effect Button Widget Android iOS Example Tutorial

Gradients is very popular among mobile and web developers because they make the view look better then the filled plain background color. In computer graphics gradients is created using minimum two or more color combinations with color mixture effects. There are basically 5 types of gradient effects available in computer and mobile graphics. Linear gradient, Radial gradient, Angle gradient, Reflected gradient and Diamond gradient effect. In flutter we can easily make Gradient effect button using gradient property of Container widget. We can make awesome gradient effect button in flutter with also implementing ripple effect on it. So in this tutorial we would Flutter Create Gradient Effect Button Widget Android iOS Example Tutorial.

Contents in this project Flutter Create Gradient Effect Button Widget Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main MyApp main class.

3. Create our main MyApp class extends with StatelessWidget. This is our Root Parent class.

4. Creating a function named as tempFunction(), we would call this function on every button. Inside this function we are simply printing a console message on terminal.

5. Creating Widget Build area -> Material App -> Scaffold widget -> Center widget -> Column widget.

5. Creating a Container Widget and wrap Flat Button inside it to make our first gradient effect button.

  1. margin : To set all side top, left, right and bottom side margin.
  2. width : Width of Button.
  3. height : Height of button.
  4. gradient : Creating Gradient with 2 Colors. I am passing here Hex color code you can also use here Color constants, Hex color code, RGB color code and ARGB color code. Read my this tutorial to know how to use different type of Color code formats in flutter.
  5. child : Here we are using Flat button.

Flutter Create Gradient Effect Button Widget Android iOS Example Tutorial

6. Creating another Container widget with Flat Button as Child widget wrap inside it. This is our second gradient effect button. In this gradient button we are using three color combinations.

7. Our third button is different from another 2 buttons. Because in our third button we are making gradient button with rounded corners. In this button we are first using Container widget -> RaisedButton -> Ink widget -> Container widget -> Text widget to gain proper effect.

8. Complete source code for main.dart file:

Screenshot in Android device :

Screenshot in iOS device:

Flutter Create Gradient Effect Button Widget Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.