Bagaimana saya bisa membuat wadah dengan sudut membulat seperti yang ditunjukkan di bawah ini? Saya mencoba menggunakan wadah dengan lebar lebih dari lebar layar. Tapi itu membatasinya di dalam layar.
Saya mencoba menggunakan kotak OverFlow, tetapi tidak mendapatkan hasil yang sama juga. Saya tidak ingin menggunakan clipRect untuk membuat ini karena saya ingin menerapkan animasi di sudut.
Menambahkan cuplikan wadah dengan hasil yang dihasilkan untuk menghilangkan keraguan
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 500,
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(500)),
),
),
);
}
Saya telah berhasil mendapatkan yang serupa dengan yang saya inginkan dengan menggunakan transformasi skala. Ingin melihat pendekatan yang berbeda sekalipun.
Saya telah melakukan ini menggunakan clippath. Jika Anda mengubah ukuran Kontainer maka ukuran Clippath secara otomatis berubah sesuai ukuran Kontainer.
Anda dapat memodifikasi Path untuk bentuk yang berbeda sesuai kebutuhan Anda, jadi ini sangat berguna. Di sini, saya hanya menggunakan widget ClipPath dan saya membuat kelas MyCustomShape untuk memodifikasi bentuk widget Wadah anak.
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black87,
body: ClipPath(
clipper: MyCustomShape(),
child: Container(
color: Colors.green[800],
height: double.infinity,
),
),
);
}
}
class MyCustomShape extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = new Path(); // use for shape your container
path.lineTo(0.0, 100);
path.quadraticBezierTo(size.width * 0.5, 0.0, size.width, 100);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
path.close();
return path;
}
