How to Use Gradients with Box Decoration in Flutter

December 3, 2021

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang How to Use Gradients with Box Decoration in Flutter. Gradient adalah penyatuan dua warna atau lebih seperti biru dan merah. Gradient terdapat berbagai macam seperti linier, radial, angle, reflected, dan diamond.

Step 1. Buat Container

Buat container dengan menambahkan code seperti berikut

Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(

),
child: Center(
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),

Step 2. Tambahkan Gradients

Tambahkan gradients pada BoxDecoration container seperti berikut

decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [
0.1,
0.4,
0.6,
0.9,
],
colors: [
Colors.yellow,
Colors.red,
Colors.indigo,
Colors.teal,
],
)
),

Complete Code

import ‘package:flutter/material.dart’;

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘HomePage’),
),
body: Padding(
padding: EdgeInsets.only(top: 20, left: 15, right: 15),
child: ListView(
children: [
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [
0.1,
0.4,
0.6,
0.9,
],
colors: [
Colors.yellow,
Colors.red,
Colors.indigo,
Colors.teal,
],
)
),
child: Center(
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.blue.shade900,
Colors.blue
],
)
),
child: Center(
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.orange.shade800,
Colors.orange.shade300
],
)
),
child: Center(
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.purple.shade900,
Colors.purple
],
)
),
child: Center(
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
]),
));
}
}

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂