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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp main class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget. This is our Root Parent class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
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.
|
1 2 3 4 5 |
void tempFunction() { print('Button Clicked'); } |
5. Creating Widget Build area -> Material App -> Scaffold widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Gradient Background Button in Flutter') ), body: Center( child: Column ( children: [ ] ) ) )); } |
5. Creating a Container Widget and wrap Flat Button inside it to make our first gradient effect button.
- margin : To set all side top, left, right and bottom side margin.
- width : Width of Button.
- height : Height of button.
- 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.
- child : Here we are using Flat button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Container( margin: EdgeInsets.all(15), width: 280, height: 52, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xffff758c), Color(0xffff7eb3)], begin: FractionalOffset.centerLeft, end: FractionalOffset.centerRight, ), ), child: FlatButton( child: Text( 'Sample Button 1', style: TextStyle(color: Colors.white), ), onPressed: () => tempFunction(), ), ), |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Container( margin: EdgeInsets.all(15), width: 280, height: 52, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xffff6e02), Color(0xffffff00), Color(0xffff6d00)], begin: FractionalOffset.centerLeft, end: FractionalOffset.centerRight, ), ), child: FlatButton( child: Text( 'Sample Button 2', style: TextStyle(color: Colors.black), ), onPressed: () => tempFunction(), ), ), |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Container( height: 52.0, margin: EdgeInsets.all(15), child: RaisedButton( onPressed: () => tempFunction(), padding: EdgeInsets.all(0.0), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(75.0)), child: Ink( decoration: BoxDecoration( gradient: LinearGradient(colors: [Color(0xff00b09b), Color(0xff96c93d)], begin: Alignment.centerLeft, end: Alignment.centerRight, ), borderRadius: BorderRadius.circular(28.0) ), child: Container( constraints: BoxConstraints(maxWidth: 280.0, minHeight: 52.0), alignment: Alignment.center, child: Text( "Sample Button 3", textAlign: TextAlign.center, style: TextStyle( color: Colors.white ), ), ), ), ),) |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void tempFunction() { print('Button Clicked'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Gradient Background Button in Flutter') ), body: Center( child: Column ( children: [ Container( margin: EdgeInsets.all(15), width: 280, height: 52, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xffff758c), Color(0xffff7eb3)], begin: FractionalOffset.centerLeft, end: FractionalOffset.centerRight, ), ), child: FlatButton( child: Text( 'Sample Button 1', style: TextStyle(color: Colors.white), ), onPressed: () => tempFunction(), ), ), Container( margin: EdgeInsets.all(15), width: 280, height: 52, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xffff6e02), Color(0xffffff00), Color(0xffff6d00)], begin: FractionalOffset.centerLeft, end: FractionalOffset.centerRight, ), ), child: FlatButton( child: Text( 'Sample Button 2', style: TextStyle(color: Colors.black), ), onPressed: () => tempFunction(), ), ), Container( height: 52.0, margin: EdgeInsets.all(15), child: RaisedButton( onPressed: () => tempFunction(), padding: EdgeInsets.all(0.0), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(75.0)), child: Ink( decoration: BoxDecoration( gradient: LinearGradient(colors: [Color(0xff00b09b), Color(0xff96c93d)], begin: Alignment.centerLeft, end: Alignment.centerRight, ), borderRadius: BorderRadius.circular(28.0) ), child: Container( constraints: BoxConstraints(maxWidth: 280.0, minHeight: 52.0), alignment: Alignment.center, child: Text( "Sample Button 3", textAlign: TextAlign.center, style: TextStyle( color: Colors.white ), ), ), ), ),) ] ) ) )); } } |
Screenshot in Android device :
Screenshot in iOS device:
