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

CodePudding user response：

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'),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    }
  }
}

CodePudding user response：

convert the widget to statefull widget. and change the ontap method like bellow

onTap: (() {
  setState((){
    isTap == !isTap;
  });
  }),

CodePudding user response：

int onTap method set isTap into SetState,

  setState((){
           isTap == !isTap;
    });

& do this in tour buildcontext method

@override
  Widget build(BuildContext context) {
    return isTap ? SizedBox(height:0) :
       
          Container(