When we click on any option the red dot should be visible otherwise red dot should not be visible. So, I'm thinking about using the visible but I can't using it properly. So, please help me in this.

CodePudding user response：

Change dizayn and use it

List<Icon> iconNames = [
  const Icon(Icons.home_outlined),
  const Icon(Icons.settings_outlined)
];

List<String> tabTitles = ['Home', 'Settings'];

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

  @override
  // ignore: library_private_types_in_public_api
  _ForTestState createState() => _ForTestState();
}

class _ForTestState extends State<ForTest> {
  int selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.indigo,
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView.builder(
            itemCount: 2,
            itemBuilder: (context, i) {
              return InkWell(
                onTap: () {
                  setState(() => selectedIndex = i);
                },
                child: Container(
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.only(bottom: 10),
                  decoration: BoxDecoration(
                      color: Colors.deepPurple,
                      borderRadius: BorderRadius.circular(10)),
                  child: Row(
                    children: [
                      iconNames[i],
                      const SizedBox(width: 20),
                      Text(tabTitles[i]),
                      const Spacer(),
                      if (selectedIndex == i)
                        const Icon(
                          Icons.circle,
                          color: Colors.red,
                          size: 10,
                        )
                    ],
                  ),
                ),
              );
            }),
      ),
    ));
  }
}

CodePudding user response：

You have many options for this. It can be if-else logic or visibility widget.

ListTile(
      onTap: () { 
      setState(() {
        hasNewMessages = false;
      });
      },
      title: Text('Messages'),
      tileColor: Colors.red,
      trailing: hasNewMessages
          ? Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Colors.black),
              width: 20,
              height: 20,
              child: Center(child:Text('3')))
          : SizedBox.shrink(),
    );

Here a sample with pure if-else logic

CodePudding user response：

You can achieve this functionality like this:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

class DataView extends StatefulWidget {
const DataView({super.key});

@override
State<DataView> createState() => _DataViewState();
}

    class _DataViewState extends State<DataView> {
 int selectedIndex = 0;
 @override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Data Table'),
  ),
  body: Column(
    children: [
      ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        shrinkWrap: true,
        itemCount: 5,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.only(bottom: 15),
            child: InkWell(
              onTap: () {
                setState(() {
                  selectedIndex = index;
                });
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('$index'),
                  Visibility(
                    visible: selectedIndex == index ? true : false,
                    child: CircleAvatar(
                      radius: 4,
                      backgroundColor: Colors.red,
                    ),
                  )
                ],
              ),
            ),
          );
        },
      )
    ],
  ),
);
 }
}