質問編集履歴

2

修正コードの提示

2022/08/15 06:18

投稿

mako_0221
mako_0221

スコア87

test CHANGED
File without changes
test CHANGED
@@ -173,3 +173,162 @@
173
173
  }
174
174
  ```
175
175
 
176
+ 調整後コード
177
+ ```Dart
178
+ //main.dart
179
+ //main.dart
180
+ import 'package:cards/view/textfield.dart';
181
+ import 'package:flutter/material.dart';
182
+ import 'package:flutter_riverpod/flutter_riverpod.dart';
183
+
184
+ void main() {
185
+ runApp(
186
+ ProviderScope(
187
+ child: MaterialApp(
188
+ title: 'Cards Demo',
189
+ home: RegisterWidget(),
190
+ ),
191
+ ),
192
+ );
193
+ }
194
+
195
+ class RegisterWidget extends ConsumerWidget {
196
+ @override
197
+ Widget build(BuildContext context, WidgetRef ref) {
198
+ return Scaffold(
199
+ body: Padding(
200
+ padding: const EdgeInsetsDirectional.fromSTEB(20, 50, 20, 0),
201
+ child: Column(
202
+ children: [
203
+ Container(
204
+ width: double.infinity,
205
+ height: 50,
206
+ // color: Colors.grey,
207
+ alignment: Alignment.topLeft,
208
+ child: Image.asset('images/logo.png'),
209
+ ),
210
+ Container(
211
+ padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0),
212
+ margin: const EdgeInsets.only(top: 30),
213
+ width: double.infinity,
214
+ // color: Colors.blue,
215
+ child: Column(
216
+ children: [
217
+ Align(
218
+ alignment: const AlignmentDirectional(0, 0),
219
+ child: TextFieldCustom(
220
+ labelText: "email",
221
+ hintText: "メールアドレス",
222
+ ),
223
+ ),
224
+ Align(
225
+ alignment: const AlignmentDirectional(0, 0),
226
+ child: TextFieldCustom(
227
+ labelText: "password",
228
+ hintText: "パスワード",
229
+ provider: mask,
230
+ ),
231
+ ),
232
+ Align(
233
+ alignment: const AlignmentDirectional(0, 0),
234
+ child: TextFieldCustom(
235
+ labelText: "password-confirm",
236
+ hintText: "パスワード確認用",
237
+ provider: maskConfirm,
238
+ ),
239
+ ),
240
+ ],
241
+ ),
242
+ ),
243
+ ],
244
+ ),
245
+ ));
246
+ }
247
+ }
248
+
249
+ //textfield.dart
250
+ //textfield.dart
251
+ import 'package:flutter/material.dart';
252
+ import 'package:flutter_riverpod/flutter_riverpod.dart';
253
+ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
254
+
255
+ final mask = StateProvider<bool>((ref) => true);
256
+ final maskConfirm = StateProvider<bool>((ref) => true);
257
+
258
+ class TextFieldCustom extends ConsumerWidget {
259
+ TextFieldCustom(
260
+ {required this.labelText,
261
+ required this.hintText,
262
+ this.provider,
263
+ Key? key})
264
+ : super(key: key);
265
+ final String labelText;
266
+ final String hintText;
267
+ final StateProvider<bool>? provider;
268
+
269
+ bool obscureTextFunction(WidgetRef ref) {
270
+ if (provider != null) {
271
+ final bool isVisible = ref.read(provider!);
272
+ return isVisible ? true : false;
273
+ } else {
274
+ return false;
275
+ }
276
+ }
277
+
278
+ Widget? suffixIconFuntion(WidgetRef ref) {
279
+ if (provider != null) {
280
+ final bool isVisible = ref.read(provider!);
281
+ return IconButton(
282
+ icon: Icon(ref.watch(provider!) // false
283
+ ? FontAwesomeIcons.solidEyeSlash
284
+ : FontAwesomeIcons.solidEye),
285
+ onPressed: () {
286
+ ref.read(provider!.notifier).update((state) => !isVisible);
287
+ },
288
+ );
289
+ } else {
290
+ return null;
291
+ }
292
+ }
293
+
294
+ @override
295
+ Widget build(BuildContext context, WidgetRef ref) {
296
+ if (provider != null) {
297
+ ref.watch(provider!);
298
+ }
299
+ return Container(
300
+ margin: const EdgeInsets.only(bottom: 10),
301
+ child: TextFormField(
302
+ style: const TextStyle(
303
+ fontSize: 13,
304
+ ),
305
+ obscureText: obscureTextFunction(ref),
306
+ decoration: InputDecoration(
307
+ labelText: labelText, //**
308
+ hintText: hintText, //**
309
+ suffixIcon: suffixIconFuntion(ref), //**
310
+ labelStyle: const TextStyle(
311
+ fontSize: 15,
312
+ color: Color.fromARGB(255, 219, 219, 219), //labelの文字の色
313
+ ),
314
+ enabledBorder: OutlineInputBorder(
315
+ borderRadius: BorderRadius.circular(2),
316
+ borderSide: const BorderSide(
317
+ color: Color.fromARGB(255, 219, 219, 219), //outlineの文字の色
318
+ width: 1.0,
319
+ ),
320
+ ),
321
+ focusedBorder: OutlineInputBorder(
322
+ borderRadius: BorderRadius.circular(2),
323
+ borderSide: const BorderSide(
324
+ color: Color.fromARGB(255, 219, 219, 219), //outline-focusの色
325
+ width: 1.0, //outlineの太さ
326
+ )),
327
+ ),
328
+ ));
329
+ }
330
+ }
331
+
332
+ ```
333
+
334
+

1

加筆しました

2022/08/14 17:39

投稿

mako_0221
mako_0221

スコア87

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,8 @@
3
3
  riverpodを利用して複数のStateを管理しようと考えております。
4
4
  `bool ObscureTextFunction(suffixIcon, ref) { //here`の箇所で悩んでおります。共通化する部分をクラスや関数でまとめた結果、複数のStateを識別することができなくなってしまいました。
5
5
  つまり、パスワード確認用の`suffixIcon`がタップされた場合、「パスワード」「パスワード確認用」いずれも動作してしまいます。理由は承知しており、どちらがタップされたのかが`ObscureTextFunction()`上識別できていないからであり、これを識別することは可能でしょうか?
6
+
7
+ 実は同じように識別不能ということでreuse可能な要素が多いにも関わらず、`SuffixIconWidget`と`SuffixIconWidgetConfirm`をそれぞれ作成したという経緯がございます。クラスを分けさえすれば識別はできてしまうためです。
6
8
 
7
9
  ```Dart
8
10
  //main.dart