[Flutter] Hide a List tile when kIsWeb == true in Flutter app

I have a list tile that I want to hide from web users and show to mobile users. I have tried using the Visibility widget but it doesn't seem to be working.

The list tile is in the SideDrawer class. I have removed the other list tiles to make it easier to read and find where I am trying to hide the list tile.

I have tried to put in some breakpoints but the execution never breaks. What am I doing wrong?

Here is my code:

class MainScreenState extends ConsumerState<MainScreen> {
int _pageIndex = 0;

@override
void initState() {
super.initState();
userFName = ref.read(usersNotifierProvider).fName;
userLName = ref.read(usersNotifierProvider).lName;
userEmail = ref.read(usersNotifierProvider).email;
setVisibility();
}

final List<Widget> appScreens = [
const CompanyDashboardScreen(),
const TransactionDetailScreen(true, true),
const AppointmentCalendarScreen(),
const UserProfileScreen(),
const ChatScreen(),
];

setVisibility() {
if (kIsWeb) {
_showOnWeb = false;
} else {
_showOnWeb = true;
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const CustomAppBar(),
body: SafeArea(child: Container(child: appScreens[_pageIndex])),
drawer: SideDrawer(),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
selectedIconTheme: const IconThemeData(color: Colors.red),
selectedItemColor: Colors.red,
unselectedItemColor: Colors.black45,
type: BottomNavigationBarType.fixed,
currentIndex: _pageIndex,
onTap: (value) {
setState(() {
_pageIndex = value;
});
if (value == 3) {
ref.read(globalsNotifierProvider.notifier).updatenewUser(false);
}
},

///
/// Bottom Navigation Bar items
///
items: const [
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.house), label: "Home"),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.fileInvoiceDollar), label: "Trxn"),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.calendar), label: "Calendar"),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.person), label: "User Profile"),
BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
],
),
);
}

// Added this for BottomNavigationBar sync
void setIndex(int index) {
if (mounted) setState(() => _pageIndex = index);
}
}

///
/// Side drawer menu items
///
class SideDrawer extends StatelessWidget {
SideDrawer({super.key});

@override
Widget build(BuildContext context) {
return Drawer(
child: (ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
accountName: Text("$userFName $userLName"),
accountEmail: Text(auth.currentUser!.email ?? 'No Email Found'),
),
Column(
children: <Widget>[
Visibility(
visible: _showOnWeb, // Hide this off for web users
child: ListTile(
leading: const FaIcon(FontAwesomeIcons.lock),
title: const Text(
'Privacy Policy',
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline),
),
onTap: () {
if (kIsWeb) {
_launchInBrowser();
} else {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const PrivacyPolicyScreen()));
}
},
),
),
ListTile(
leading: const Icon(
Icons.logout,
color: Colors.red,
),
title: const Text('Log Out'),
onTap: () {
// Update the state of the app
signOut();
// Then close the drawer
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen()));
},
),
],
),
],
)),
);
}


Thanks

Continue reading...