| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「Flutter Riverpod」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
55行目: 55行目:
 
|-
 
|-
 
|}
 
|}
 +
 +
===基本===
 +
<pre>
 +
import 'package:flutter/material.dart';
 +
import 'package:firebase_core/firebase_core.dart';
 +
import 'package:flutter_riverpod/flutter_riverpod.dart';
 +
 +
void main() async {
 +
  // Flutter の初期化処理を待つ
 +
  WidgetsFlutterBinding.ensureInitialized();
 +
  // Firebaseの初期化(非同期)を待つ
 +
  await Firebase.initializeApp();
 +
 +
  // ProviderScope でラップ
 +
  runApp(ProviderScope(child: MyApp()));
 +
}
 +
 +
class MyApp extends StatelessWidget {
 +
  // This widget is the root of your application.
 +
  @override
 +
  Widget build(BuildContext context) {
 +
    return MaterialApp(
 +
      title: 'MyApp',
 +
      theme: ThemeData(
 +
      primarySwatch: Colors.blue,
 +
      ),
 +
      home: Consumer( // Comsumeerでラップ
 +
        builder: (context, watch, child) {
 +
          return Center(child:Text('MyApp'));
 +
        },
 +
      )
 +
    );
 +
  }
 +
}
 +
</pre>

2021年8月12日 (木) 06:25時点における版

| Flutter | Dart | ブログカテゴリ(Flutter) | Android Studio | Flutter macos | FlutterFire | Flutter 手順 |

Flutter Riverpod

基本

データの受け渡し


Providerをグローバルに定義し、データを受け渡す

データを渡す


種類 目的
Provider 任意のデータを渡す
FutureProvider Futureから取得する任意のデータを渡す
Stream Provider Streamから取得する任意のデータを渡す
StateProvider 変更可能な任意のデータを渡す
StateNotifireProvider StateNotifireProviderから取得する任意のデータを渡す
ScopedProvider 場所に応じて異なる任意のデータを渡す

データを受け取る


種類 目的
ConsumerWidget 継承することでデータを受け取れるWidget
Consumer コールバック内でデータを受け取れるWidget
useProvider() flutter_hooksを利用し、HookWidgetを継承したWidgetでデータを受け取れる関数
context.read() BuildContextからデータを受け取れる関数(ただしデータの変更通知は受け取れない)
ProviderContainer Flutterに依存しない形でデータを受け取れる

基本

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

void main() async {
  // Flutter の初期化処理を待つ
  WidgetsFlutterBinding.ensureInitialized();
  // Firebaseの初期化(非同期)を待つ
  await Firebase.initializeApp();

   // ProviderScope でラップ
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
       primarySwatch: Colors.blue,
      ),
      home: Consumer( // Comsumeerでラップ
        builder: (context, watch, child) { 
          return Center(child:Text('MyApp'));
        },
      )
    );
  }
}