Zenn
📑

Riverpod 入門 ~その1~

2024/02/15に公開
Android
Flutter
Riverpod
tech

自己紹介

  • 受託で働いているしがない 20代Android エンジニア(メンタルやって半日しか働けてない and 結構レガシーコード触ってる)が、VSCode 使って Flutter を今更勉強してみようというやつ
  • Android Studio より VSCode の方が軽いのと fvm とか入れるの便利っぽいので VSCode でやることにしたよ
  • 目標は confference app 2023 を理解するまで週に2,3本書くこと
  • Zenn で収益化？そんなものは知りません！

対象者

  • 偉いからコミュニティガイドラインに目を通しましたよっと
  • Android 開発含めソフトウェア開発にある程度慣れていて Riverpod の公式ドキュメント読んでみたいなって思ってるけど、面倒くさくてやってない人
  • Flutter から勉強始めたけど Riverpod で「なんやこれ！」って挫折してる人
    • 本当にサラッと触れるだけだからある程度はググってね！
  • 筆者は大したことない普通の Android エンジニアなので気楽にどうぞ

小ネタ

備忘録だと読んでてつまんなくね？
ってことで読み飛ばしてもらって全然かまへんけど、小ネタ書くよ。

今回は趣味の話し。
自己紹介にも書いてるけどスカパンクとフットボール、酒と洋服が好き。

スカパンクはそのままスカパンク。
金管系🎺とズンチャズンチャって感じが大好き、よかったら聞いてみて。

プレー歴は 10年くらい。
高校の時に 怪我 --> 病気発覚 --> 全身麻酔で手術 --> リハビリ、復帰 --> ああもうレギュラー無理だしスポ根文化嫌い、ワイはスポーツとして好きなんや！で辞めた。
小学生の時に某クラブチームのジュニアにいたりしたよ。
昔はディビジョン1にいたのになんか最近落ちてた、悲しい。
今はフットサルしかやらないんだけど、アラサーって体力がちょうど落ちていくピークで色々と辛い。
こんなに体動かなくなるもんなんだねって驚いてる😇
お金あれば整体行きたい、すぐ行きたい。

「プログラミングはパズルだから好き」って言う人へ。
「フットボールもパズルそのもの」なのだ。

酒はなんでも好き。
特にアイリッシュウイスキーが好き。
大学の研究室にいたキャラ濃い教授の影響かな。
目白田中屋さんの店主好き。

洋服は綺麗めカジュアルが好き。
まるメガネが似合うから、ロングコートダディの堂前さんに似てるねって言われる。
猫🐈飼いたい。

書きすぎたわ。
今日はこんなところ。
早速、始めていくよ。

概要

前回で、環境構築と VSCode 触る際に最低限使いそうなものは調べたから
Riverpod 公式のチュートリアルやってくよ！

Let's Start！

ほへえ、便利すぎんかね

パッケージ導入

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

lint は今はいいや。

Hellow World!


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

ちょっと待てぃ

  • part main.g.dart の g って何？って思って調べたら、generated の g みたい
  • これ自動生成してあげなきゃいけないんじゃ？と思ったらビンゴ
  • 以下のコマンド打たないと手元の環境じゃ動かないから注意
    • flutter pub run build_runner build
    • ドキュメントに書いてないの不便すぎぃ、書いてくれよわからんわ
  • flutter pub add dev:build_runner
    • これを入れた時にドキュメント読んでないのがバレてしまった。。このタイミングで読んだし、ままええか

所感

  • なるほどねえ、@riverpod アノテーションついている helloWorld が Viewmodel みたいな感じなのかな？
  • 推測だけど @riverpod アノテーションがついているメソッド内で API 叩く、みたいなことができると、Android の ViewModel + repository が代替される感じになりそ
  • これ入れると Provider 作るときに補完してくれるってさ
  • めっちゃコード少なく済むんじゃないかこれ。。
    • って錯覚するだけで、API とビジネスロジックとの兼ね合いなので API の取得結果にフィルターかけたり何度も API 叩いたり色々やらなきゃいけないんじゃないかと妄想中...
    • 例えば 1つの Widget に取得結果を出すとして、API を連鎖して叩かなきゃいけない時のエラーハンドリングとか結局だるそうだねえとか妄想中...

Next Step

どっちか選べって言われてるから Provider の方にいこうかにゃ~

また次回！👋

Discussion