i want to close some container after clicking a close button but i dont know how to do that,
i’m already try using if-else but i’m on stuck now maybe anyone can help to fix it
here my code :
import 'package:flutter/material.dart';
import '../../theme.dart';
class PencapaianBersama_Section extends StatelessWidget {
final bool isTap;
const PencapaianBersama_Section({
Key? key,
this.isTap = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (isTap) {
return SizedBox();
} else {
return Container(
padding: EdgeInsets.all(16),
width: MediaQuery.of(context).size.width / 1.1,
height: 148,
decoration: BoxDecoration(
color: whiteColor,
borderRadius: BorderRadius.circular(16),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pencapaian bersama',
style: grayText.copyWith(fontSize: 10),
),
Text(
'Periode Agustus 2022',
style: blackText.copyWith(fontSize: 14),
),
SizedBox(
height: 8,
),
Row(
children: [
Container(
width: 25,
height: 24,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/proses/icon_recycle.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 8,
),
Text(
'16%',
style: blackText.copyWith(
fontSize: 20, fontWeight: semiBold),
),
],
),
SizedBox(
height: 8,
),
Text(
'Penurunan dari periode sebelumnya',
style: grayText.copyWith(fontSize: 8),
),
SizedBox(
height: 8,
),
Text(
'Selengkapnya',
style: lightBlueText.copyWith(fontSize: 10),
),
],
),
Container(
width: 149,
height: 92,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/proses/image_pencapaian.png'),
fit: BoxFit.cover),
),
),
],
)
],
),
Row(
children: [
Spacer(),
GestureDetector(
onTap: (() {
isTap == !isTap;
}),
child: Container(
width: 16,
height: 16,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/proses/icon_close.png'),
),
),
),
),
],
),
],
),
);
}
}
}
it’s some illustration the program that i want to make, from picture on left to the right
here the picture
can someone help me about it, i’m new on coding
>Solution :
here is how you can do it using stateful widget.
import 'package:flutter/material.dart';
import '../../theme.dart';
class PencapaianBersama_Section extends StatefulWidget {
bool isTap;
PencapaianBersama_Section({
Key? key,
this.isTap = false,
}) : super(key: key);
@override
State<PencapaianBersama_Section> createState() => _PencapaianBersama_SectionState();
}
class _PencapaianBersama_SectionState extends State<PencapaianBersama_Section> {
@override
Widget build(BuildContext context) {
if (widget.isTap) {
return SizedBox();
} else {
return GestureDetector(
onTap: (){
widget.isTap = !widget.isTap;
setState((){});
},
child: Container(
padding: EdgeInsets.all(16),
width: MediaQuery.of(context).size.width / 1.1,
height: 148,
decoration: BoxDecoration(
color: whiteColor,
borderRadius: BorderRadius.circular(16),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pencapaian bersama',
style: grayText.copyWith(fontSize: 10),
),
Text(
'Periode Agustus 2022',
style: blackText.copyWith(fontSize: 14),
),
SizedBox(
height: 8,
),
Row(
children: [
Container(
width: 25,
height: 24,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/proses/icon_recycle.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 8,
),
Text(
'16%',
style: blackText.copyWith(
fontSize: 20, fontWeight: semiBold),
),
],
),
SizedBox(
height: 8,
),
Text(
'Penurunan dari periode sebelumnya',
style: grayText.copyWith(fontSize: 8),
),
SizedBox(
height: 8,
),
Text(
'Selengkapnya',
style: lightBlueText.copyWith(fontSize: 10),
),
],
),
Container(
width: 149,
height: 92,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/proses/image_pencapaian.png'),
fit: BoxFit.cover),
),
),
],
)
],
),
Row(
children: [
Spacer(),
GestureDetector(
onTap: (() {
widget.isTap == !widget.isTap;
}),
child: Container(
width: 16,
height: 16,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/proses/icon_close.png'),
),
),
),
),
],
),
],
),
),
);
}
}
}