My code doesn't seem to work. nothing pops up
Closed this issue · 14 comments
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:reown_appkit/reown_appkit.dart';
import 'package:trybe/album/albumpage.dart';
import 'package:trybe/models/imagemodel.dart';
import 'package:trybe/showImage/view.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key,});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ReownAppKitModal? _appKitModal;
bool _isAppKitModalInitialized = false;
@override
void initState() {
super.initState();
_initializeAppKitModal();
}
Future<void> _initializeAppKitModal() async {
// Regi;ster here the event callbacks on the service you'd like to use. See `Events` section.
_appKitModal = ReownAppKitModal(
context: context,
projectId: '632b21c33e29272fac6f8b94eca76878',
metadata: const PairingMetadata(
name: 'Example App',
description: 'Example app description',
url: 'https://reown.com/',
icons: ['https://reown.com/logo.png'],
redirect: Redirect(
native: 'com.example.trybe',
universal: 'https://reown.com/exampleapp',
),
),
);
print('object');
// Initialize the modal and set state when done
await _appKitModal!.init();
setState(() {
_isAppKitModalInitialized = true;
});
print('done');
print(_isAppKitModalInitialized);
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: AppBar(
surfaceTintColor: Colors.white,
leading: Padding(
padding: const EdgeInsets.only(left: 10),
child: Image.asset('assets/png/pfp.png'),
),
actions: [
Padding(
padding: const EdgeInsets.only(right:kIsWeb ? 30 : 20),
child: Container(
height: size.height/18,
width: kIsWeb ? size.width/8 : size.width/3.5,
decoration: const BoxDecoration(
color: kIsWeb ? Colors.green : Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(8))
),
child: Row(
children: [
AppKitModalConnectButton(
appKit:_appKitModal!,
custom: InkWell(
onTap: ()async{
if (_isAppKitModalInitialized) {
print('connected');
_appKitModal!.openModalView();}
},
child: const Text(
'Connect Wallet',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
Visibility(
visible: _appKitModal!.isConnected,
child: AppKitModalAccountButton(
appKit: _appKitModal!,
context: context,
),
),
],
),
),
)
],
flexibleSpace: const Row(
children: [
Padding(
padding: EdgeInsets.only(left: 50,right: 8,top: kIsWeb ? 8 : 64,bottom:8),
child: Text(
kIsWeb ?'Trybe': '',
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 26,
),
),
),
],
),
foregroundColor: const Color.fromARGB(255, 255, 251, 251),
backgroundColor: const Color.fromARGB(255, 255, 255, 251),
shadowColor: const Color.fromARGB(255, 255, 255, 255),
),
),
body: Column(
children: [
Expanded(
child: MasonryGridView.builder(
itemCount: images.length,
padding: const EdgeInsets.only(top: 20),
gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
crossAxisCount:kIsWeb ? 4 : 1),
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: (){
Get.dialog(
ShowImage(index)
);
},
child: Padding(
padding: const EdgeInsets.only(bottom: 20,left: 15,right: 15),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.08),
blurRadius: 15.5,
spreadRadius: 4
)
]
),
child: Column(
children: [
Container(
height: 50,
decoration: const BoxDecoration(
color: Color.fromRGBO(243, 242, 242, 1),
borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
child: Padding(
padding: const EdgeInsets.only(left: 24),
child: Row(
children: [
const CircleAvatar(),
const SizedBox(width: 10,),
Text(
'Oxsangz.eth',
style: GoogleFonts.montserratAlternates(
textStyle:const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(0, 0, 0, 1))),)
],
),
),
),
Padding(
padding: const EdgeInsets.only(right: 24),
child: SizedBox(
child: SvgPicture.asset('assets/svg/globeicon.svg'),
),
)
],),
),
Image.asset(images[index].image,fit: BoxFit.cover,),
Container(
height: 230,
decoration: const BoxDecoration(
color: Color.fromRGBO(255, 255, 255, 1),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20))
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SvgPicture.asset('assets/svg/indicator.svg'),
Padding(
padding: const EdgeInsets.only(left: 18,right:18),
child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisi',
style: GoogleFonts.montserratAlternates(
textStyle:const TextStyle(
fontSize: 12.25,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(0, 0, 0, 1)
)
),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 18,),
child: Text('1hr ago',
style: GoogleFonts.montserratAlternates(
textStyle: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 11.25,
color: Color.fromRGBO(0, 0, 0, 1)
)
),),
),
],
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 24),
child: SizedBox(
child: Row(
children: [
SvgPicture.asset('assets/svg/likeicon.svg'),
Padding(
padding: const EdgeInsets.only(left: 8,right: 8),
child: SvgPicture.asset('assets/svg/loveicon.svg'),
),
SvgPicture.asset('assets/svg/bookmakicon.svg'),
],
),
),
),
Padding(
padding: const EdgeInsets.only(right: 24),
child: SizedBox(
child: Row(
children: [
SizedBox(
child: Column(
children: [
Row(
children: [
Text('0.002',
style:GoogleFonts.montserratAlternates(
textStyle:const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12,
color: Color.fromRGBO(0, 0, 0, 1)
)
) ,),
Text('ETH',
style: GoogleFonts.montserrat(
textStyle:const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12,
color: Color.fromRGBO(0, 0, 0, 1)
)
),
)
],
),
Padding(
padding: const EdgeInsets.only(left: 30),
child: Text("~\$30",
style: GoogleFonts.montserratAlternates(
textStyle:const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 9,
color: Color.fromRGBO(0, 0, 0, 1)
)
),
),
)
],
),
),
SvgPicture.asset('assets/svg/mint.svg',height: 40,),
],
),
),
)
],
),
)
],
),
)
],
)
),
),
),
);
}),
),
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: _naviIcon('assets/svg/homeicon.svg', 'Home',(){
Navigator.of(context).push(MaterialPageRoute(builder: ((context) => const MyHomePage())));
}),label:'',),
BottomNavigationBarItem(icon: _naviIcon('assets/svg/albumicon.svg', 'Album',(){
Navigator.of(context).push(MaterialPageRoute(builder: ((context) => const AlbumPage())));
}),label: ''),
BottomNavigationBarItem(icon: _naviIcon('assets/svg/minticon.svg', 'Mint',(){}),label: '',),
BottomNavigationBarItem(icon: _naviIcon('assets/svg/walleticon.svg', 'Wallet',(){}),label:'')
]),
);
}
}
Widget _naviIcon(String icon, String name,Function() onTap){
return GestureDetector(
onTap:onTap,
child: SizedBox(
child: Column(children: [
SvgPicture.asset(icon),
const SizedBox(height: 4,),
Text(name,
style: GoogleFonts.montserratAlternates(
textStyle: const TextStyle(
fontSize: 8.9,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(0, 0, 0, 1)
)
),
)
],)
),
);
}My code
What do you mean by nothing pops up? Do you see any errors in the console? Also, there's no point you keep sending me a code that I can not run on my end or that I have to install lot of external libraries to run it.
When we ask for a minimum reproducible code, such code shouldn't depend on other packages or clases that we can not install on our end, such as these ones:
import 'package:trybe/album/albumpage.dart';
import 'package:trybe/models/imagemodel.dart';
import 'package:trybe/showImage/view.dart';
For the future, a minimum reproducible code should only depende on Flutter SDK and Reown SDK, that's all.
That being said, I went ahead and reproduced your code and it's working fine to me:
Simulator.Screen.Recording.-.iPhone.13.mini.-.2024-10-17.at.09.58.03.mp4
Please add this just below your _appKitModal = ReownAppKitModal() initialization and see if any error is shown in the console.
_appKitModal!.onModalConnect.subscribe((ModalConnect? event) {
debugPrint('onModalConnect');
});
_appKitModal!.onModalDisconnect.subscribe((ModalDisconnect? event) {
debugPrint('onModalDisconnect');
});
_appKitModal!.onModalError.subscribe((ModalError? event) {
debugPrint('onModalError $event');
});
_appKitModal!.appKit!.core.relayClient.onRelayClientError
.subscribe((ErrorEvent? event) {
debugPrint('onRelayClientError ${event?.error}');
});flutter: onRelayClientError SocketException: Failed host lookup: 'relay.walletconnect.org' (OS Error: nodename nor servname provided, or not known, errno = 8)
[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Instance of 'ReownAppKitModalException'
Any chance you don't have internet connection on your device?
This error stopped when I added a curly bracket to my projectId: '{632b21c33e.......}'
I'm working on the starlink internet and I have tried using normal internet. I'm no longer getting the error but my status.isInitialized is false
this projectId '{632b21c33e.......}' is invalid, it won't get initialized, you should rollback that change and work on a better internet connection. I tried your implementation and it's working fine to me. There's nothing we can do honestly but I'll try to reach out to the team just in case. I'll close this for now and come back to you.
Hello @ChekoutMkt, can you try the following?
_appKitModal = ReownAppKitModal(
context: context,
appKit: ReownAppKit(
core: ReownCore(
projectId: '07429c7285515de0715980519ef2e148',
relayUrl: 'wss://relay.walletconnect.com',
),
metadata: const PairingMetadata(
name: 'Example App',
description: 'Example app description',
url: 'https://reown.com/',
icons: ['https://reown.com/logo.png'],
redirect: Redirect(
native: 'com.example.trybe',
universal: 'https://reown.com/exampleapp',
),
),
),
);flutter: onRelayClientError SocketException: Failed host lookup: 'relay.walletconnect.com' (OS Error: nodename nor servname provided, or not known, errno = 8flutter: onRelayClientError SocketException: Failed host lookup: 'relay.walletconnect.com' (OS Error: nodename nor servname provided, or not known, errno = 8
Still getting the same issue. onRelayClientError SocketException: Failed host lookup: 'relay.walletconnect.com' (OS Error: nodename nor servname provided, or not known, errno = 8)
flutter: onRelayClientError SocketException: Failed host lookup: 'relay.walletconnect.com' (OS Error: nodename nor servname provided, or not known, errno = 8)
Hey @ChekoutMkt! A few checks you could try (to be clear, this is not an issue on our side but we still want to try help):
The error you are encountering, SocketException: Failed host lookup: 'relay.walletconnect.com', indicates a DNS resolution issue, meaning that your device cannot resolve the hostname to an IP address. This can happen for several reasons, especially with Starlink connections, which might handle DNS differently due to its satellite-based infrastructure.
Here are a few steps you can try to troubleshoot and resolve the issue:
Check DNS settings:
- Change your device's DNS settings to use a public DNS service like Google (8.8.8.8, 8.8.4.4) or Cloudflare (1.1.1.1). This may help in case the default DNS provided by Starlink is having trouble resolving walletconnect.com.
Use a VPN:
- Try connecting via a VPN. Sometimes, Starlink’s routing can have issues with certain servers, and using a VPN can bypass these routing problems.
Check Starlink connectivity:
- Ensure that your Starlink connection is stable. Satellite internet can sometimes have high latency, which could affect real-time services like WebSockets.
Flush DNS cache:
- If you're on a desktop, try flushing the DNS cache. This can resolve issues with stale DNS records.
- On Windows:
ipconfig /flushdns - On macOS/Linux:
sudo dscacheutil -flushcache(macOS) orsudo systemd-resolve --flush-caches(Linux)
- On Windows:
Try a different network:
- If possible, test the connection on a different network (e.g., mobile data or a different Wi-Fi) to see if the issue is specific to your Starlink connection.
I used vpn and it works, thank you so much. Can we have people being able to create a wallet with an email
Can we have people being able to create a wallet with an email
Is this a question?
yeah.
Yes, here's the docs https://docs.reown.com/appkit/flutter/onboarding/email
thank you