【備忘録】flutter riverpod アプリセットアップ

flutter使ってアプリ作ろうと考えているときに
riverpod導入してアプリ作成した方が良いというような記事をチラホラみたので

riverpod導入したアプリのセットアップ作業を備忘録として残しておきます。

version
flutter: 2.8
dart: 2.15
flutter_hooks: ^0.18.0
hooks_riverpod: ^1.0.2

riverpodとは

Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

より
・実行時ではなくコンパイル時にプログラミングエラーをキャッチします

・オブジェクトをリッスン/結合するためのネストを削除します

・コードがテスト可能であることを確認します

flutterのプロバイダーの使い方が楽になるみたいな感じ?。。。

プロジェクト作成

私はvs codeを利用してたのでvscodeベースでの説明を行います。

新しい flutter project の作成

 

1. vscode 上で⌘+p
2. >Flutter: New Project  と入力
3. Application を選択
4. 自分が作成したいディレクトリに移動

5. 任意のファイル名を決定(river_pod_appにしました)

これでfluttter project は作成できました。次にriverpod 導入をしていきます。

pubsec.yamlを設定

ここからは、公式参照です。(https://riverpod.dev/docs/getting_started/

のようにパッケージを追加した後に、プロジェクト上でflutter pub get

 

main.dartを変更

公式の(https://riverpod.dev/docs/getting_started/ )と同じように変更を加えます

ターミナル上でflutter run を実行

中央にHello worldと表示されれば成功です!!!

 

補足

環境によってはずっとローディング状態になって動かないといった現象もあるらしいので fvm でflutter のversionを変更してriverpodが動く環境に変更する必要があるらしい。。

今回は特に問題なかったのでよかった(⌒▽⌒)

 

これからアプリ作成の勉強もしていきたいと思います。

Follow me!

コメント

PAGE TOP
タイトルとURLをコピーしました