Minggu, 14 Februari 2021

Flutter Travel UI Project - Membuat Gambar yang Memiliki Shadow dengan Border Radius Circular

Flutter Travel UI Project - Membuat Gambar yang Memiliki Shadow dengan Border Radius Circular

Insights yang didapatkan :
Jika ingin membuat gambar yang ber-shadow, diatur border-radiusnya dan dapat diatur posisinya, maka image harus dibungkus oleh ClipRRect, kemudian dibungkus oleh Stack, selanjutnya dibungkus oleh container.

pada container, kita memanfaatkan boxdecoration untuk membuat efek shadow nya dengan memanggil boxShadow.

Berikut merupakan pengimplementasiannya :

Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20.0),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black26,
                              offset: Offset(
                                0.0,
                                2.0,
                              ),
                              blurRadius: 6.0,
                            )
                          ]),
                      child: Stack(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(20.0),
                            child: Image(
                              image: AssetImage(destination.imageUrl),
                              height: 180,
                              width: 180,
                              fit: BoxFit.cover,
                            ),
                          )
                        ],
                      ),
                    )


EmoticonEmoticon