walletconnect_modal widget gives error "A RenderFlex overflowed by 1.2 pixels on the bottom."

[EggsyOnCode]

Here is my code:

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  Future<void> loginMetaMask(BuildContext context) async {
    Web3App wcClient = await Web3App.createInstance(
      relayUrl:
          'wss://relay.walletconnect.com', // The relay websocket URL, leave blank to use the default
      projectId: '123',
      metadata: PairingMetadata(
        name: 'dApp (Requester)',
        description: 'A dapp that can request that transactions be signed',
        url: 'https://walletconnect.com',
        icons: ['https://avatars.githubusercontent.om/u/37784886'],
      ),
    );

    ConnectResponse res = await wcClient.connect(requiredNamespaces: {
      'eip155': RequiredNamespace(
        chains: ['eip155:5'], // Ethereum chain
        methods: [
          'eth_sendTransaction',
          'eth_signTransaction',
          'eth_sign',
          'personal_sign',
          'eth_signTypedData'
        ], // Requestable Methods
        events: ['eth_sendTransaction'], // Requestable Events
      )
    });

    Uri? uri = res.uri;

    WalletConnectModalService service = WalletConnectModalService(
      projectId: '90eecda9bedfdc8c89e381ece1a7bd4d',
      metadata: const PairingMetadata(
        name: 'Flutter WalletConnect',
        description: 'Flutter WalletConnectModal Sign Example',
        url: 'https://walletconnect.com/',
        icons: ['https://walletconnect.com/walletconnect-logo.png'],
        redirect: Redirect(
          native: 'flutterdapp://',
          universal: 'https://www.walletconnect.com',
        ),
      ),
    );
    await service.init();

    await service.open(context: context );

    print("Waiting for the wallet address");

    final SessionData session = await res.session.future;

    var result = await wcClient.request(
        topic: session.topic,
        chainId: 'eip155:5',
        request: SessionRequestParams(method: 'eth_signTransaction', params: [
          {
            "0xE0462A44f97421E0A896cb2A7A31624D592ea52F",
            "0xbdfd1C89115133d1bB0a6587705a3D00cc07aA98",
            "0xd9145CCE52D386f254917e481eB44e9943F39138"
          }
        ]));
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.sizeOf(context);
    return Scaffold(
      appBar: AppBar(title: Text("Login Page")),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Align(
          alignment: Alignment.center,
          child: Center(
            child: Container(
              height: size.height * 0.3,
              child: Column(children: [
                ElevatedButton(
                  onPressed: () async {
                    loginMetaMask(context);
                  },
                  child: Text("Connect to Metamask"),
                ),
              ]),
            ),
          ),
        ),
      ),
    );
  }
}

How can I resolve this matter?

[EggsyOnCode]

And somehow deeplinking is also not working on clicking metmask; any reason why? I have already followed the guide given here: https://pub.dev/documentation/walletconnect_modal_flutter/latest/

[EggsyOnCode]

@Luzzotica might need your guidance here

[hayderux]

@Luzzotica @Sameerkash problem still happening in latest version

[quetool]

Hello @hayderux ! Any particular reason you are using WalletConnectModal? Can I interest you in switching to Web3Modal instead? https://docs.walletconnect.com/web3modal/flutter/installation

[hayderux]

@quetool idk about this someone mentioned it few weeks ago.. it just confusing for me .. thanks anyway

[quetool]

@hayderux here there's a blogpost about them both but I'd say Web3Modal v3 would fit most of the uses cases. https://medium.com/walletconnect/web3modal-v3-0-designed-to-onboard-cryptos-first-billion-users-a19b7404a89c