質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

解決済

riverpodで複数のstateを監視する方法につきまして

mako_0221
mako_0221

総合スコア61

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

1回答

0リアクション

0クリップ

219閲覧

投稿2022/08/14 17:34

編集2022/08/15 06:18

version:flutter_riverpod: ^1.0.3

riverpodを利用して複数のStateを管理しようと考えております。
bool ObscureTextFunction(suffixIcon, ref) { //hereの箇所で悩んでおります。共通化する部分をクラスや関数でまとめた結果、複数のStateを識別することができなくなってしまいました。
つまり、パスワード確認用のsuffixIconがタップされた場合、「パスワード」「パスワード確認用」いずれも動作してしまいます。理由は承知しており、どちらがタップされたのかがObscureTextFunction()上識別できていないからであり、これを識別することは可能でしょうか?

実は同じように識別不能ということでreuse可能な要素が多いにも関わらず、SuffixIconWidgetSuffixIconWidgetConfirmをそれぞれ作成したという経緯がございます。クラスを分けさえすれば識別はできてしまうためです。

Dart

//main.dart import 'package:cards/view/textfield.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; void main() { runApp( ProviderScope( child: MaterialApp( title: 'Cards Demo', home: RegisterWidget(), ), ), ); } class RegisterWidget extends ConsumerWidget { Widget build(BuildContext context, WidgetRef ref) { return Scaffold( body: Padding( padding: const EdgeInsetsDirectional.fromSTEB(20, 50, 20, 0), child: Column( children: [ Container( width: double.infinity, height: 50, // color: Colors.grey, alignment: Alignment.topLeft, child: Image.asset('images/logo.png'), ), Container( padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0), margin: const EdgeInsets.only(top: 30), width: double.infinity, // color: Colors.blue, child: Column( children: [ const Align( alignment: AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "email", hintText: "メールアドレス", suffixIcon: null, ), ), Align( alignment: const AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "password", hintText: "パスワード", suffixIcon: SuffixIconWidget()), ), Align( alignment: const AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "password-confirm", hintText: "パスワード確認用", suffixIcon: SuffixIconWidgetConfirm()), ), ], ), ), ], ), )); } }

Dart

//textfield.dart import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; final mask = StateProvider<bool>((ref) => true); final maskConfirm = StateProvider<bool>((ref) => true); class TextFieldCustom extends ConsumerWidget { const TextFieldCustom({required this.labelText, required this.hintText, this.suffixIcon, Key? key}): super(key: key); final String labelText; final String hintText; final Widget? suffixIcon; Widget build(BuildContext context, WidgetRef ref) { return Container( margin: const EdgeInsets.only(bottom: 10), child: TextFormField( style: const TextStyle( fontSize: 13, ), obscureText: ObscureTextFunction(suffixIcon, ref), //here decoration: InputDecoration( labelText: labelText, //** hintText: hintText, //** suffixIcon: suffixIcon, //** labelStyle: const TextStyle( fontSize: 15, color: Color.fromARGB(255, 219, 219, 219), //labelの文字の色 ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(2), borderSide: const BorderSide( color: Color.fromARGB(255, 219, 219, 219), //outlineの文字の色 width: 1.0, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(2), borderSide: const BorderSide( color: Color.fromARGB(255, 219, 219, 219), //outline-focusの色 width: 1.0, //outlineの太さ )), ), )); } } bool ObscureTextFunction(suffixIcon, ref) { //here //suffixIconがnullではない場合は、パスワードなので、そこで分岐させる print(ref.watch(mask)); if (suffixIcon == null) { return false; } else { final bool isVisible = ref.watch(mask); return isVisible ? false : true; } } class SuffixIconWidget extends ConsumerWidget { Widget build(BuildContext context, WidgetRef ref) { final bool isVisible = ref.read(mask); return IconButton( icon: Icon(ref.watch(mask) // false ? FontAwesomeIcons.solidEye : FontAwesomeIcons.solidEyeSlash), onPressed: () { ref.read(mask.notifier).update((state) => !isVisible); }, ); } } class SuffixIconWidgetConfirm extends ConsumerWidget { Widget build(BuildContext context, WidgetRef ref) { final bool isVisible = ref.read(maskConfirm); return IconButton( icon: Icon(ref.watch(maskConfirm) // false ? FontAwesomeIcons.solidEye : FontAwesomeIcons.solidEyeSlash), onPressed: () { ref.read(maskConfirm.notifier).update((state) => !isVisible); }, ); } }

調整後コード

Dart

//main.dart //main.dart import 'package:cards/view/textfield.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; void main() { runApp( ProviderScope( child: MaterialApp( title: 'Cards Demo', home: RegisterWidget(), ), ), ); } class RegisterWidget extends ConsumerWidget { Widget build(BuildContext context, WidgetRef ref) { return Scaffold( body: Padding( padding: const EdgeInsetsDirectional.fromSTEB(20, 50, 20, 0), child: Column( children: [ Container( width: double.infinity, height: 50, // color: Colors.grey, alignment: Alignment.topLeft, child: Image.asset('images/logo.png'), ), Container( padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0), margin: const EdgeInsets.only(top: 30), width: double.infinity, // color: Colors.blue, child: Column( children: [ Align( alignment: const AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "email", hintText: "メールアドレス", ), ), Align( alignment: const AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "password", hintText: "パスワード", provider: mask, ), ), Align( alignment: const AlignmentDirectional(0, 0), child: TextFieldCustom( labelText: "password-confirm", hintText: "パスワード確認用", provider: maskConfirm, ), ), ], ), ), ], ), )); } } //textfield.dart //textfield.dart import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; final mask = StateProvider<bool>((ref) => true); final maskConfirm = StateProvider<bool>((ref) => true); class TextFieldCustom extends ConsumerWidget { TextFieldCustom( {required this.labelText, required this.hintText, this.provider, Key? key}) : super(key: key); final String labelText; final String hintText; final StateProvider<bool>? provider; bool obscureTextFunction(WidgetRef ref) { if (provider != null) { final bool isVisible = ref.read(provider!); return isVisible ? true : false; } else { return false; } } Widget? suffixIconFuntion(WidgetRef ref) { if (provider != null) { final bool isVisible = ref.read(provider!); return IconButton( icon: Icon(ref.watch(provider!) // false ? FontAwesomeIcons.solidEyeSlash : FontAwesomeIcons.solidEye), onPressed: () { ref.read(provider!.notifier).update((state) => !isVisible); }, ); } else { return null; } } Widget build(BuildContext context, WidgetRef ref) { if (provider != null) { ref.watch(provider!); } return Container( margin: const EdgeInsets.only(bottom: 10), child: TextFormField( style: const TextStyle( fontSize: 13, ), obscureText: obscureTextFunction(ref), decoration: InputDecoration( labelText: labelText, //** hintText: hintText, //** suffixIcon: suffixIconFuntion(ref), //** labelStyle: const TextStyle( fontSize: 15, color: Color.fromARGB(255, 219, 219, 219), //labelの文字の色 ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(2), borderSide: const BorderSide( color: Color.fromARGB(255, 219, 219, 219), //outlineの文字の色 width: 1.0, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(2), borderSide: const BorderSide( color: Color.fromARGB(255, 219, 219, 219), //outline-focusの色 width: 1.0, //outlineの太さ )), ), )); } }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。