【Flutter/Riverpod】Consumerで値を取得|ConsumerWidgetとの違いは?

今回はRiverpodのプロバイダの値をConsumerで取得する方法を紹介します。

ConsumerConsumerWidgetの違いについても解説していきます。

\ 世界最大級のオンライン学習サービス /

目次

Consumerの使い方

final helloWorldProvider = Provider((ref) => 'Hello world');
Consumer(
  builder: (context, ref, child) {
    final value = ref.watch(helloWorldProvider);
    return Text(
      value,
      style: TextStyle(fontSize: 30),
    );
  },
),

builder内でref(WidgetRef)を使用してプロバイダから値を取得し、Widgetを返します。

ConsumerとConsumerWidgetの違い

ConsumerWidgetはプロバイダの値が更新される度に全てビルドし直すのに対し、ConsumerではConsumer内の部分のみビルドし直すので後者の方がパフォーマンス性に優れています。

一方で複数のプロバイダを使用する場合Consumerだとコードが複雑になりがちなので、なるべく短くシンプルなコードを書く点においてConsumerWidgetの方が優れています。

サンプルコード

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

final helloWorldProvider = Provider((ref) => 'Hello world');

void main() => runApp(ProviderScope(child: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Center(
          child: Consumer(
            builder: (context, ref, child) {
              final value = ref.watch(helloWorldProvider);
              return Text(
                value,
                style: TextStyle(fontSize: 30),
              );
            },
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次