Home > other >  remove row at icon pressed - flutter
remove row at icon pressed - flutter

Time:08-17

I have this icon

 IconButton( icon: Icon(Icons.delete,
            color: Colors.blueAccent[200]),
            onPressed: () {
               setState(() {});
            },
            ) ;

when I clicked on Icon I need to remove entire row with all contents inside it . here is the row code :

Row(children: [Column(
                            children: [
                              Text(
                                "Text",
                                style: TextStyle(
                                  fontSize: 14.0,
                                ),
                              ),
                              Text(
                               "text",
                                style: TextStyle(
                                  fontSize: 12.0,
                                  color: Colors.grey[400],
                                ),
                              )
                            ],
                          ),
                          SizedBox(
                            width: 30.0,
                          ),
                          IconButton(
                            icon: Icon(Icons.delete,
                                color: Colors.blueAccent[200]),
                            onPressed: () {
                              setState(() {});
                            },
                          )
                        ],
                      ),

How can I do that . Can anyone help me please

CodePudding user response:

Here it is a solution with multiple row

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<int> _deletedIcons = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
            itemCount: 10,
            itemBuilder: (c, i) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    Expanded(child: Text("Test ${i}")),
                    _deletedIcons.contains(i) ? Container() : GestureDetector(

                        onTap: (){
                          if(!_deletedIcons.contains(i)){
                            _deletedIcons.add(i);
                            setState(() {

                            });
                          }
                        },
                        child: Icon(Icons.delete))
                  ],
                ),
              );
            }));
  }
}

CodePudding user response:

this is the code for to do that

bool isActive=true;

'''''
'''''
'''''
'''''

Widget build(BuildContext context) {

'''''
'''''
'''''
'''''

isActive?

     Row(children: [Column(
                            children: [
                              Text(
                                "Text",
                                style: TextStyle(
                                  fontSize: 14.0,
                                ),
                              ),
                              Text(
                               "text",
                                style: TextStyle(
                                  fontSize: 12.0,
                                  color: Colors.grey[400],
                                ),
                              )
                            ],
                          ),
                          SizedBox(
                            width: 30.0,
                          ),
                          IconButton(
                            icon: Icon(Icons.delete,
                                color: Colors.blueAccent[200]),
                            onPressed: () {
                              setState(() {

                              isActive=false

                                });
                            },
                          )
                        ],
                      ),
         :Container(),

CodePudding user response:

A state bool to cover visibility. Like

  bool isVisible = true;

And use the bool as conditional if

if(isVisible ) Row(...)

And set the bool value to false with setState to make it invisible , you can also check Visibility widget.

CodePudding user response:

You can use Visibility widget to do that:

var isVisible = true;

IconButton( icon: Icon(Icons.delete,
        color: Colors.blueAccent[200]),
        onPressed: () {
           setState(() { isVisible = false; });
        },
        ) ;

Visibility(
            visible: isVisible,
            child:
          Row(children: [Column(
            children: [
              Text(
                "Text",
                style: TextStyle(
                  fontSize: 14.0,
                ),
              ),
              Text(
                "text",
                style: TextStyle(
                  fontSize: 12.0,
                  color: Colors.grey[400],
                ),
              )
            ],
          ),
            SizedBox(
              width: 30.0,
            ),
            IconButton(
              icon: Icon(Icons.delete,
                  color: Colors.blueAccent[200]),
              onPressed: () {
                setState(() {});
              },
            )
          ],
          ),
          )
  • Related