Wallet_connect Flutter APP Not able to select different wallet - flutter

Question

I am trying to connect different wallets using the Wallet_connect package. However, Every time I click on a different wallet, it opens the same one like all the buttons open Metamask, or all of them open Trust Wallet. I am new to Flutter and to web3 generally
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:walletconnect_dart/walletconnect_dart.dart';
class Connect extends StatefulWidget {
const Connect({Key? key}) : super(key: key);
#override
State<Connect> createState() => _ConnectState();
}
class _ConnectState extends State<Connect> {
var connector = WalletConnect(
bridge: 'https://bridge.walletconnect.org',
clientMeta: const PeerMeta(
name: 'IRISA ++',
description: 'WalletConnect Developer App',
url: 'https://metamask.io/',
icons: [
'https://files.gitbook.com/v0/b/gitbook-legacy-files/o/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
]));
loginUsingMetamask(BuildContext context) async {
if (!connector.connected) {
try {
var session = await connector.createSession(onDisplayUri: (uri) async {
var _uri = uri;
await launchUrlString(uri, mode: LaunchMode.externalApplication);
});
print(session.accounts[0]);
print(session.chainId);
setState(() {
var _session = session;
});
} catch (exp) {
print(exp);
}
}
}
loginUsingTrust(BuildContext context) async {
if (!connector.connected) {
try {
var session = await connector.createSession(onDisplayUri: (uri) async {
await launchUrlString(uri, mode: LaunchMode.externalApplication);
});
setState(() {
});
} catch (exp) {
print(exp);
}
}
}
loginUsingRain(BuildContext context) async {
if (!connector.connected) {
try {
var session = await connector.createSession(onDisplayUri: (uri) async {
await launchUrlString(uri, mode: LaunchMode.externalApplication);
});
setState(() {
});
} catch (exp) {
print(exp);
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white, //<-- SEE HERE
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('lib/assets/images/wallet.png', width:400, height:200),
const SizedBox(
height: 60,
child:Text('Connect your wallet', style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black)),
),
SizedBox(
width: 300, // <-- Your width
height: 100, // <-- Your height
child: ElevatedButton.icon(// <-- OutlinedButton
onPressed: () => loginUsingMetamask(context),
icon:Image.asset('lib/assets/images/metamask.png', width:50, height:50),
label: const Text('MetaMask', style: TextStyle(
fontSize: 28,
color: Colors.white)),
style: ElevatedButton.styleFrom(
primary: Colors.brown,
side: BorderSide(color: Colors.brown.shade900, width: 3), //<-- SEE HERE
),//elevated btton background
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: 300, // <-- Your width
height: 100, // <-- Your height
child: OutlinedButton.icon( // <-- OutlinedButton
onPressed: () => loginUsingTrust(context),
icon: Image.asset('lib/assets/images/trustwallet1.png', width:50, height:50),
label: const Text('Trust Wallet', style: TextStyle(
fontSize: 28,
color: Colors.white)),
style: ElevatedButton.styleFrom(
primary: Colors.grey.shade400,
side: BorderSide(color: Colors.blue.shade900, width: 3), //<-- SEE HERE
),
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: 300, // <-- Your width
height: 100, // <-- Your height
child: OutlinedButton.icon( // <-- OutlinedButton
onPressed: () => loginUsingRain(context),
icon:Image.asset('lib/assets/images/rainbow.png', width:50, height:50),
label: const Text('Rainbow', style: TextStyle(
fontSize: 28,
color: Colors.white)),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
side: BorderSide(color: Colors.blue.shade900, width: 3), //<-- SEE HERE
),
),
),
],
),
)
);
}
}
I would really appreciate any response or different way to do this task
Thank you