Tutorial Flutter Cara Menciptakan Background Dampak Gradient

Tutorial Flutter Cara Membuat Background Efek Gradient

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

Pada tutorial ini kita akan mencar ilmu cara menciptakan 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 memakai widget Flexible dan masing-masing perbandingannya yakni 1:2:1. Layout tersebut akan kita gunakan untuk menciptakan efek gradient yang berbeda-beda, yaitu LinearGradient, RadialGradient, dan SweepGradient.

Diperlukan widget Container dengan memakai decoration untuk sanggup menciptakan background efek gradient. Untuk mencobanya ikuti langkah-langkah berikut :

1. Buat project Flutter

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

2. Membuat layout

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

import 'package:flutter/material.dart'; 

Buat fungsi main untuk memanggil class yang pertama kali ditampilkan, tambahkan isyarat 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 menciptakan class MyApp berupa StatelessWidget. Tambahkan isyarat berikut sesudah fungsi main :

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

Untuk menciptakan tampilan baris memakai Column, untuk menciptakan layout menyerupai pada gambar sebelumnya dengan perbandingan maka memakai 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 bundar pada efek gradient radial ganti pada bab radius.

SweepGradient

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

3. Full isyarat 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 kesannya menyerupai berikut :

Flutter Gradient Background

Demikian tutorial flutter cara menciptakan background efek gradient, tutorial ini sangat cocok untuk pemula alasannya sangat gampang untuk dipelajari. Untuk mengasah skill kau dan mencar ilmu flutter untuk pemula kalian sanggup mengikuti artikel berikut :

Tutorial Flutter Cara Membuat Drawer Praktis dan Lengkap

Tutorial Flutter Membuat Layout Sederhana

Share this post