Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – change isActive on click

I have this widget list for a profile list and it looks like this

enter image description here

Here is the code for this. I am a bit new,any help is appreciate

Widget _buildProfileList() {
    return Expanded(
      child: ListView(
        children: [
          _buildProfileItem('AA', '+99 90 111 11 11', true),
          _buildProfileItem('BB', '+99 90 222 22 22', false),
          _buildAddProfileButton(),
        ],
      ),
    );
  }

  Widget _buildProfileItem(String name, String phone, bool isActive) {
    return Card(
      color: Colors.white,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: isActive ? Colors.green : Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(10),
      ),
      child: ListTile(
        leading: Icon(Icons.person),
        title: Text(name),
        subtitle: Text(phone),
        trailing: isActive ? Icon(Icons.check, color: Colors.green) : null,
      ),
      onPressed: (){

      },
    );
  }

So I am passing the function an bool isActive and according to that it looks as if selected or not. What I want to do is, If I press any other child inside ListView() I want the active one to change, as it should be.

Yet if I try to add onPressed :(){} it returns an error saying The parameter onPressed is not defined and this is for Card() I think.

even if it was defined, how can I change the isActive one as I wished after clicking the button?

Tags:

2

Answers


  1. 0

    Create a variable named selectedIndex. When a list tile is selected change this value in _buildProfileItem pass an index. Compare this index with the selected Item as follows

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int selectedIndex = 0;//This variable will hold which item is selected
//change it to index in place of bool
  Widget _buildProfileItem(String name, String phone, int index) {
    return Card(
      color: Colors.white,
      shape: RoundedRectangleBorder(
        side: BorderSide(
            color: selectedIndex == index ? Colors.green : Colors.grey,
            width: 2),
        borderRadius: BorderRadius.circular(10),
      ),
      child: ListTile(
        leading: Icon(Icons.person),
        title: Text(name),
        subtitle: Text(phone),
        trailing: selectedIndex == index
            ? Icon(Icons.check, color: Colors.green)
            : null,
        onTap: () {
          setState(() {
            selectedIndex = index;
//set the index on tap of the list tile.
          });
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: [
        _buildProfileItem('AA', '+99 90 111 11 11', 0),
        _buildProfileItem('BB', '+99 90 222 22 22', 1),
      ],
    ));
  }
}
    Login or Signup to reply.
  2. 0

    You need to maintain index or some identifier of the ListTile item that is active( which means the one clicked by user or initially selected).

    Card doesn’t have onPressed parameter hence the error. You have to move the onPressed function to ListTile.

    Say you decide to use the phone as an identifier, you can do something like follows:

    1. variable declaration
        String isActive='either-phone-number';

    either-phone-number is one phone number you decide to show as selected dy default. If none then pass ”( empty string) .

    1. on tap function
    onPressed: ()=>
setState(()=> isActive ='listtile-phone-number')
,

    listtile-phone-number is the number passed to the ListTile.

    1. isActive condition
    isActive=='listtile-phone-number'?Icon():null,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search