Fluter 엔지니어를 위한 웹 3 시작
지금 기사에서는 발표를 위해 제작된 데모리아 프라이에 대해 해설을 하고 싶다.
샘플 코드는 다음과 같습니다.
웹 3
웹, 블로그 등을 이용해 일방적으로 발송하는 웹1, 소셜네트워크서비스의 웹2, 블록체인을 통해 비중앙적 집권을 실현하고 자율과 보유의 웹3을 실현한다.이런 느낌은 반년 동안 인터넷 3이라는 단어가bazuword로 단번에 흥행했다.
웹 3에서 창업합니다.BAYC라는 고릴라.일본 최초의 세일러문 같은 NFC 아트.트위터를 보고 유행하고 있다고 느낀 인터넷 3.
탈 수밖에 없는 큰 파도!그래서 현재 보도에서 플랫터라는 큰 파도에 겨우 앉을 수 있는 나는 웹 3의 큰 파도에 한 발을 넣고 싶다.
Flutter에서 웹 페이지 3을 어떻게 만듭니까?
Flutter 대학 학습회의 발표 주제×웹 3로 뭘 하고 싶어요.
Firebase와AWS를 백엔드로 Flutter 앱을 만들어 왔던 곳을 체인으로 바꾸면 되지 않을까요?그렇게 생각하겠지.
하지만, 체인 실현!!그럼 어디부터 할까요?이렇게 되는 건 불가능한 거죠?따라서 Flutter의 웹 3성 프로그램 라이브러리를 조사하기로 했다.
그렇다면 주로 메타마스크 지갑과 연결해야 인터넷 3이다.MetaMask에 대한 설명은 잠시 접어두지만, 가상화폐의 지갑으로 이번에 처리한 가상화폐는 샘으로 한다.
라이브러리 조사
Fluter Web 3을 검색한 결과 두 개의 라이브러리가 발견되었습니다.
web3dart
먼저 홈페이지 3번입니다.일본어에 나오는 다음 두 문장은 모두 홈페이지 3을 사용했다.
이 프로그램 라이브러리의 매력은 iOS/Android에 대응할 수 있다는 데 있다. 그러나 기사를 읽고 인상을 남기기 어려워서 프로그램을 통해 메타마스크에 로그인해서 얻을 수 없다고 생각해서 이번에 웹 3 dart 사용을 포기했다.
flutter_web3
일본어 기사는 못 찾았지만 이번엔 이걸 썼어요.
Fluter Web이 끝났기 때문에 크롬 확장에 MetaMask를 추가하면 MetaMask의 합작이 가능하다는 이유에서다.
로컬 응용 프로그램은 아니지만 Fluter 웹 설치에만 한정되어 있지만 영어 검색을 사용해도 iOS/Android로Metamask 로컬 응용 프로그램에 심도 있는 링크를 설치한 예를 찾을 수 없기 때문에 현재 Flutter를 사용할 수 있습니다×나는 인터넷 3이 Fluter Web이 될 것이라고 생각한다.
그래서 flutter나는 웹 페이지 3의 포장을 시험해 보고 싶다.
Fluter 설치
여기서부터 아까는 정말 직접https://pub.dev/packages/flutter_web3readme만 했어요. 그런데 소개해 드릴게요.
package install
readme와 같다
flutter pub add flutter_web3
pubspec.yaml fluter웹3 추가 후 index.>에서 다음을 추가합니다.이렇게 하면 js의 이더넷과 MetaMask가 연결된 프로그램 라이브러리에 넣을 수 있을 것 같습니다. <!--Ethers-->
<script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js" type="application/javascript"></script>
<!--Wallet Connect-->
<script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/umd/index.min.js" type="application/javascript"></script>
Metamask 연합
사용한 파일에서 다음과 같은 flutter웹 가져오기 3
import 'package:flutter_web3/flutter_web3.dart';
아래 이름을 사용할 경우 MetaMask로 마이그레이션합니다.final accounts = await ethereum!.requestAccount();
잔액 표시
어수선하지만 다음과 같은 느낌으로 잔액은 더블형으로 표현할 수 있으니 Text에 보여주세요.
final accounts = await ethereum!.requestAccount();
final firstAccount = accounts.first;
final BigInt balance = await provider!.getBalance(kboyAddress);
final double ethBalance = balance.toDouble() * 1 / 1000000000000000000;
상세 처리는 아래github창고를 참조하세요.송금하다
다음 처리로 미역 씨의 메타마스크 주소로 입금할 수 있습니다.입금해 보세요.
const konbuAddress = '0x2c0dC4406e90e1E61F57251E6BE01972cDC2C1F9';
final tx = await provider!.getSigner().sendTransaction(
TransactionRequest(
to: konbuAddress,
value: BigInt.from(1000000000000),
),
);
final receipt = await tx.wait();
총결산
대략적으로 설명하였으니 상세한 처리는 아래의 샘플 창고를 참조하시오.
여러분도 Flutter와 MetaMask로 콜라보 해주세요!
Fluter대학의 유료 계획이 있는 사람은 로그인하면 다음 페이지에서 학습회 영상을 볼 수 있다.보고 싶은 사람도 플레터 대학 입회를 연구해 보세요.😘
Reference
이 문제에 관하여(Fluter 엔지니어를 위한 웹 3 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/kboy/articles/347a408ab6f902텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)