「Flutter Riverpod」の版間の差分
ナビゲーションに移動
検索に移動
| 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'));
},
)
);
}
}
© 2006 矢木浩人