Web3Kit is a core & UI library for building web3 applications with Flutter Web. It contains the most useful features for building web3 applications. And a rich UI Kit to build web3 applications with Flutter Web easily.
Behind the scenes, Web3Kit uses Ethers.js to interact with the Ethereum network. Web3Kit also uses dart interop to interact directly with the browser, Ethers.js and the wallets.
To get started with Web3Kit, follow these steps:
flutter pub add web3kit<script type="module">
import { ethers } from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.min.js";
window.ethers = ethers;
</script>It should be placed inside the <body> tag. Like this:
<body>
<script type="module">
import { ethers } from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.min.js";
window.ethers = ethers;
</script>
<script src="flutter_bootstrap.js" async></script>
</body>To make use of Web3Kit UI Kit, you will need to delegate Web3Kit Localizations also, like this:
localizationsDelegates: const [Web3KitLocalizations.delegate],To use any feature of the Web3Kit, you first need to initialize it:
await Web3Kit.initialize();This initialization needs to be done only once. So you can add it in your main.dart:
Future<void> main() async {
await Web3Kit.initialize(); // recommended to initialize Web3Kit before running the app
runApp(const MyApp());
}