Tutorial Flutter Cara Menggunakan ClipRRect Widget Mudah

Tutorial Flutter ClipRRect Widget

Codingtive.com - ClipRRect merupakan widget pada Flutter yang digunakan untuk membuat klip dengan bentuk tertentu, biasanya digunakan untuk membuat bentuk rounded, oval, dan bentuk custom sesuai dengan keinginan kita.

Pada tutorial ini kita akan belajar menggunakan ClipRRect widget untuk menampilkan gambar dengan bentuk rounded / bulat. Untuk membuat gambar dengan bentuk yang bulat kamu tidak perlu menggunakan plugin, karena kamu bisa memanfaatkan widget ClipRRect.

Ikuti langkah-langkah berikut untuk mulai mencobanya :

Illustrasi latihan

Menampilkan 2 gambar yang diambil dari internet, kemudian memotongnya menjadi bentuk rounded. Seperti ini yang akan kita buat :

Flutter ClipRRect Widget

Latihan

Langkah pertama yang kamu lakukan yaitu membuat project baru, atau kamu dapat menggunakan project yang sudah ada dan pastikan laptop kamu terkoneksi dengan internet.

Buka file main.dart pada folder lib, kemudian kita akan membuat kode dasarnya sebelum menampilkan gambar. Kodenya seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter ClipRRect",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter ClipRRect"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // widget gambar disini
          ],
        ),
      ),
    );
  }
}

Selanjutnya kita membuat Image widget dengan bentuk lingkaran dan bentuk hanya beberapa bagian saja yang rounded. Tambahkan kode berikut didalam children dari widget Column :

ClipRRect(
  borderRadius: BorderRadius.circular(50.0),
  child: Image.network(
    'http://branyavred.info/wp-content/uploads/2019/01/good-morning-nature-hd-good-morning-nature-wallpaper-good-morning-nature-picture-messages.jpg',
    width: 100.0,
    height: 100.0,
    fit: BoxFit.cover,
  ),
),
SizedBox(height: 50.0,),
ClipRRect(
  borderRadius: BorderRadius.only(
    topRight: Radius.circular(20.0),
    bottomLeft: Radius.circular(20.0),
  ),
  child: Image.network(
    'http://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg',
    width: 100.0,
    height: 100.0,
    fit: BoxFit.cover,
  ),
),

Full Source Code

Berikut keseluruhan kode pada file main.dart seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter ClipRRect",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter ClipRRect"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(50.0),
              child: Image.network(
                'http://branyavred.info/wp-content/uploads/2019/01/good-morning-nature-hd-good-morning-nature-wallpaper-good-morning-nature-picture-messages.jpg',
                width: 100.0,
                height: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(height: 50.0,),
            ClipRRect(
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(20.0),
                bottomLeft: Radius.circular(20.0),
              ),
              child: Image.network(
                'http://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg',
                width: 100.0,
                height: 100.0,
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Sekarang coba run dengan emulator atau hp, hasilnya seperti berikut :

Tutorial flutter how to use ClipRRect

Bedah Kode

Perhatikan untuk kode berikut :

ClipRRect(
  borderRadius: BorderRadius.circular(50.0),
  child: Image.network(
    'http://branyavred.info/wp-content/uploads/2019/01/good-morning-nature-hd-good-morning-nature-wallpaper-good-morning-nature-picture-messages.jpg',
    width: 100.0,
    height: 100.0,
    fit: BoxFit.cover,
  ),
),
SizedBox(height: 50.0,),
ClipRRect(
  borderRadius: BorderRadius.only(
    topRight: Radius.circular(20.0),
    bottomLeft: Radius.circular(20.0),
  ),
  child: Image.network(
    'http://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg',
    width: 100.0,
    height: 100.0,
    fit: BoxFit.cover,
  ),
),

Untuk mengatur bentuk rounded yaitu pada bagian borderRadius, berikut penjelasannya :

BorderRadius.circular(50.0) digunakan untuk membuat bentuk circular / bundar pada semua sisi dengan ukuran 50. Sedangkan untuk mengatur bentuk rounded pada beberapa bagian saja kamu dapat menggunakan BorderRadius.only().

Pada widget Image kita juga menambahkan BoxFit.cover, yang tujuannya yaitu supaya gambar memenuhi ukuran yang ada sehingga tidak terdapat space yang kosong.

Github

Untuk kode lengkapnya juga terdapat pada repository github :

Github Saya

Kesimpulan

Untuk memotong widget dengan bentuk seperti rounded, oval kamu dapat memanfaatkan widget ClipRRect, contoh penggunaannya yaitu membuat gambar dengan bentuk lingkaran. Kamu dapat explore lebih banyak lagi untuk membuat bentuk lainnya.

Untuk menambah skill kamu berikut terdapat beberapa artikel tentang Image pada Flutter, yuk pelajari juga :

Tutorial Flutter Menggunakan Image Widget Mudah dan Lengkap

Tutorial Flutter Cara Menggunakan Cached Network Image

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: