flutter使ってアプリ作ろうと考えているときに
riverpod導入してアプリ作成した方が良いというような記事をチラホラみたので
riverpod導入したアプリのセットアップ作業を備忘録として残しておきます。
flutter: 2.8
dart: 2.15
flutter_hooks: ^0.18.0
hooks_riverpod: ^1.0.2
riverpodとは
より
・実行時ではなくコンパイル時にプログラミングエラーをキャッチします
・オブジェクトをリッスン/結合するためのネストを削除します
・コードがテスト可能であることを確認します
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/ ）
|
1 2 3 4 5 6 7 8 9 |
environment: sdk: ">=2.12.0 <3.0.0" flutter: ">=2.0.0" dependencies: flutter: sdk: flutter flutter_hooks: ^0.18.0 hooks_riverpod: ^1.0.2 |
のようにパッケージを追加した後に、プロジェクト上でflutter pub get
main.dartを変更
公式の（https://riverpod.dev/docs/getting_started/ ）と同じように変更を加えます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import 'package:flutter/material.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; final helloWorldProvider = Provider((_) => 'Hello world'); void main() { runApp( ProviderScope( child: MyApp(), ), ); } // Note: MyApp is a HookConsumerWidget, from flutter_hooks. class MyApp extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final String value = ref.watch(helloWorldProvider); return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Example')), body: Center( child: Text(value), ), ), ); } } |
ターミナル上でflutter run を実行
中央にHello worldと表示されれば成功です！！！
補足
環境によってはずっとローディング状態になって動かないといった現象もあるらしいので fvm でflutter のversionを変更してriverpodが動く環境に変更する必要があるらしい。。
今回は特に問題なかったのでよかった(⌒▽⌒)
これからアプリ作成の勉強もしていきたいと思います。
コメント