Tutorial Flutter Cara Membuat Background Efek Gradient

Tutorial Flutter Cara Membuat Background Efek Gradient

Codingtive.com - Gradient merupakan corak warna yang dapat dikembangkan dari dua warna atau lebih, atau perpaduan antar warna yang digabungkan. Untuk membuat efek gradient pada Flutter sangat mudah, bahkan ada beberapa tipe gradient yang dapat kita buat.

Pada tutorial ini kita akan belajar cara membuat background dengan efek gradient, berikut tampilan yang akan kita buat untuk menampilkan background dengan efek gradient :

Contoh layout flutter

Kita akan membagi layar menjadi 3 bagian, dengan menggunakan widget Flexible dan masing-masing perbandingannya adalah 1:2:1. Layout tersebut akan kita gunakan untuk membuat efek gradient yang berbeda-beda, yaitu LinearGradient, RadialGradient, dan SweepGradient.

Diperlukan widget Container dengan menggunakan decoration untuk dapat membuat background efek gradient. Untuk mencobanya ikuti langkah-langkah berikut :

1. Buat project Flutter

Buat project baru dengan nama flutter_learn_gradient dan pastikan laptop kalian terkoneksi dengan internet, tunggu sampai proses download dan sinkronisasi project selesai.

2. Membuat layout

Selanjutnya buka file main.dart pada folder lib, kemudian hapus semua isi kodenya. Pertama tambahkan kode untuk import library material :

import 'package:flutter/material.dart';

Buat fungsi main untuk memanggil class yang pertama kali ditampilkan, tambahkan kode berikut dibawah import :

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Color Gradients',
    home: MyApp(),
  ));
}

Kode diatas class yang pertama kali dipanggil yaitu MyApp, selanjutnya kita akan membuat class MyApp berupa StatelessWidget. Tambahkan kode berikut setelah fungsi main :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          // tambahkan Flexible widget disini
        ],
      ),
    );
  }
}

Untuk membuat tampilan baris menggunakan Column, untuk membuat layout seperti pada gambar sebelumnya dengan perbandingan maka menggunakan widget Flexible, tambahkan 3 widget Flexible berikut didalam children dari Column dengan tipe gradient yang berbeda-beda :

Linear Gradient : 

Flexible(
  flex: 1,
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.bottomLeft,
        end: Alignment.topRight,
        colors: <Color>[
          Colors.teal,
          Colors.blue,
        ],
      ),
    ),
  ),
),

begin : warna dimulai dari (contoh diatas yaitu bawah kiri).

end : warna berakhir ke (contoh diatas yaitu atas kanan).

RadialGradient:

Flexible(
  flex: 2,
  child: Container(
    decoration: BoxDecoration(
      gradient: RadialGradient(
        radius: 2.0,
        colors: <Color>[
          Colors.yellow,
          Colors.purple,
          Colors.blue,
        ],
      ),
    ),
  ),
),

Untuk mengubah jangkauan lingkaran pada efek gradient radial ganti pada bagian radius.

SweepGradient

Flexible(
  flex: 1,
  child: Container(
    decoration: BoxDecoration(
      gradient: SweepGradient(
        startAngle: 1.0,
        colors: <Color>[
          Colors.lime,
          Colors.cyan,
          Colors.amber,
        ],
      ),
    ),
  ),
),

3. Full kode main.dart

Full source code pada file main.dart seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Color Gradients',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight,
                  colors: <Color>[
                    Colors.teal,
                    Colors.blue,
                  ],
                ),
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  radius: 2.0,
                  colors: <Color>[
                    Colors.yellow,
                    Colors.purple,
                    Colors.blue,
                  ],
                ),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  startAngle: 1.0,
                  colors: <Color>[
                    Colors.lime,
                    Colors.cyan,
                    Colors.amber,
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Sekarang coba jalankan dengan emulator atau hp kalian maka hasilnya seperti berikut :

Flutter Gradient Background

Demikian tutorial flutter cara membuat background efek gradient, tutorial ini sangat cocok untuk pemula karena sangat mudah untuk dipelajari. Untuk mengasah skill kamu dan belajar flutter untuk pemula kalian dapat mengikuti artikel berikut :

Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap

Tutorial Flutter Membuat Layout Sederhana

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: