I want to change a card color when a card is tapped. I made all functioanlities. I set inkwell too for tapping. Everything is ready but i am confused how to change a specific card color when it is tapped. Tried with bool to change a card color. But when i tapped a card all card color is changing. this not i want . I want only one card color should change when it is tapped.

isPressed ? Colors.blueAccent : Colors.white,

 InkWell(
                              onTap: () {
                                setState(() {
                                  isPressed = !isPressed;
                                });
  

in listview.builder i can fetch data in card from api.

  ListView.builder(
                        itemCount: widget.notification == null
                            ? 0
                            : widget.notification.length,
                        itemBuilder: (context, index) { 
    return
    
    
     Card(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          color: isPressed ? Colors.blueAccent : Colors.white,
                          child: Padding(
                            padding: EdgeInsets.all(16.0),
                            child: InkWell(
                              onTap: () {
                                setState(() {
                                  isPressed = !isPressed;
                                });
                                Navigator.push(
                                    context,
                                    new MaterialPageRoute(
                                        builder: (BuildContext context) =>
                                            new DetailPage()));
                              },
                              child: Column(
                                children: <Widget>[
                                  Row(
                                    children: [
                                      SizedBox(
                                        width: 20,
                                      ),
                                      Text(
                                        'Status',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold),
                                      ),
                                      SizedBox(
                                        width: 67,
                                      ),
                                      Text(widget.notification[index]["data"]
                                              ["message"]
                                          .toString()),
                                    ],
                                  ),
1

There are 1 answers

1
Raine Dale Holgado On BEST ANSWER

You can try this example. Copy paste the code

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return MyCard(isPressed: false);
        });
  }
}

class MyCard extends StatefulWidget {
  final bool isPressed;

  const MyCard({Key key, this.isPressed}) : super(key: key);
  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  bool _isPressed;

  @override
  void initState() {
    _isPressed = widget.isPressed;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      color: _isPressed ? Colors.blueAccent : Colors.white,
      child: InkWell(
        onTap: () {
          setState(() {
            _isPressed = !_isPressed;
          });
        },
        child: Container(
          height: 50,
        ),
      ),
    );
  }
}