Fluter 엔지니어를 위한 웹 3 시작

며칠 전 플루터 대학 내 학습회에서는'플루터 엔지니어를 위한 웹 3 입문'이라는 제목으로 발표됐다.
지금 기사에서는 발표를 위해 제작된 데모리아 프라이에 대해 해설을 하고 싶다.
샘플 코드는 다음과 같습니다.
https://github.com/kboy-silvergym/flutter_web3_sample

웹 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


https://pub.dev/packages/web3dart
먼저 홈페이지 3번입니다.일본어에 나오는 다음 두 문장은 모두 홈페이지 3을 사용했다.
이 프로그램 라이브러리의 매력은 iOS/Android에 대응할 수 있다는 데 있다. 그러나 기사를 읽고 인상을 남기기 어려워서 프로그램을 통해 메타마스크에 로그인해서 얻을 수 없다고 생각해서 이번에 웹 3 dart 사용을 포기했다.
https://qiita.com/hhatto/items/169523665daeaf95516a
https://qiita.com/oggata/items/ecb21d4262e947da191b

flutter_web3


일본어 기사는 못 찾았지만 이번엔 이걸 썼어요.
Fluter Web이 끝났기 때문에 크롬 확장에 MetaMask를 추가하면 MetaMask의 합작이 가능하다는 이유에서다.
로컬 응용 프로그램은 아니지만 Fluter 웹 설치에만 한정되어 있지만 영어 검색을 사용해도 iOS/Android로Metamask 로컬 응용 프로그램에 심도 있는 링크를 설치한 예를 찾을 수 없기 때문에 현재 Flutter를 사용할 수 있습니다×나는 인터넷 3이 Fluter Web이 될 것이라고 생각한다.
https://pub.dev/packages/flutter_web3
그래서 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창고를 참조하세요.
https://github.com/kboy-silvergym/flutter_web3_sample

송금하다


다음 처리로 미역 씨의 메타마스크 주소로 입금할 수 있습니다.입금해 보세요.
const konbuAddress = '0x2c0dC4406e90e1E61F57251E6BE01972cDC2C1F9';

final tx = await provider!.getSigner().sendTransaction(
  TransactionRequest(
    to: konbuAddress,
    value: BigInt.from(1000000000000),
  ),
);
final receipt = await tx.wait();


총결산


대략적으로 설명하였으니 상세한 처리는 아래의 샘플 창고를 참조하시오.
https://github.com/kboy-silvergym/flutter_web3_sample
여러분도 Flutter와 MetaMask로 콜라보 해주세요!
Fluter대학의 유료 계획이 있는 사람은 로그인하면 다음 페이지에서 학습회 영상을 볼 수 있다.보고 싶은 사람도 플레터 대학 입회를 연구해 보세요.😘
https://flutteruniv.com/materials/lecture_videos/4oea9DloHes9xZdgErG9

좋은 웹페이지 즐겨찾기