クラスやオブジェクト指向についてDart言語+FlutterSDKを通じて学んでいるのですが、下記のところまで記載して考え方や実際に適用する方法がわからなくなってしまいました。関連するところについて//**
でマーキングさせて頂きました。
TextFieldEmail()
ウィジェットとTextFieldPassword
ウィジェットを並べているのですが、コードの通り、殆どが共通しております。実際にはこれらのクラスを分けずに共通する部分を束ねることがクラスの一つの役割かと思っているのですが、このケースでは「どのように束ねるべきか」がわかりません。
コンストラクタ時点で分岐させて分けて一つのクラスで管理するのか、親クラスのような物を作って、それぞれの子クラスに継承させて複数クラスで管理するのかイメージがわきません。
稚拙は承知で申し訳ございませんが、本件であれば、「一般的にはこのようにします」のようなアドバイスをいただけると大変有難いです。
よろしくお願い申し上げます。
Dart
1//main.dart 2import 'package:cards/view/textfield.dart'; 3import 'package:flutter/material.dart'; 4import 'package:flutter_riverpod/flutter_riverpod.dart'; 5 6 7void main() { 8 runApp( 9 ProviderScope( 10 child: MaterialApp( 11 title: 'Demo', 12 home: RegisterWidget(), 13 ), 14 ), 15 ); 16} 17 18class RegisterWidget extends ConsumerWidget { 19 20 21 Widget build(BuildContext context, WidgetRef ref) { 22 return Scaffold( 23 body: Padding( 24 padding: const EdgeInsetsDirectional.fromSTEB(20, 50, 20, 0), 25 child: Column( 26 children: [ 27 Container( 28 padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0), 29 margin: const EdgeInsets.only(top: 30), 30 width: double.infinity, 31 child: Column( 32 children: [ 33 Align( 34 alignment: const AlignmentDirectional(0, 0), 35 child: TextFieldEmail(),//** 36 ), 37 Align( 38 alignment: const AlignmentDirectional(0, 0), 39 child: TextFieldPassword(),//** 40 ), 41 ], 42 ), 43 ), 44 ], 45 ), 46 )); 47 } 48}
Dart
1import 'package:flutter/material.dart'; 2import 'package:flutter_riverpod/flutter_riverpod.dart'; 3import 'package:font_awesome_flutter/font_awesome_flutter.dart'; 4 5class TextFieldEmail extends ConsumerWidget { 6 7 8 Widget build(BuildContext context, WidgetRef ref) { 9 return Container( 10 margin: const EdgeInsets.only(bottom: 10), 11 child: TextFormField( 12 style: const TextStyle( 13 fontSize: 13, 14 ), 15 obscureText: true, 16 decoration: InputDecoration( 17 labelText: "email",//** 18 hintText: "メールアドレス",//** 19 suffixIcon: null,//** 20 labelStyle: const TextStyle( 21 fontSize: 15, 22 color: Color.fromARGB(255, 219, 219, 219), //labelの文字の色 23 ), 24 enabledBorder: OutlineInputBorder( 25 borderRadius: BorderRadius.circular(2), 26 borderSide: const BorderSide( 27 color: Color.fromARGB(255, 219, 219, 219), //outlineの文字の色 28 width: 1.0, 29 ), 30 ), 31 focusedBorder: OutlineInputBorder( 32 borderRadius: BorderRadius.circular(2), 33 borderSide: const BorderSide( 34 color: Color.fromARGB(255, 219, 219, 219), //outline-focusの色 35 width: 1.0, //outlineの太さ 36 )), 37 ), 38 )); 39 } 40} 41 42// final mask = StateProvider((ref) => false); 43 44class TextFieldPassword extends ConsumerWidget { 45bool mask = false; 46 47 48 Widget build(BuildContext context, WidgetRef ref) { 49 return Container( 50 margin: const EdgeInsets.only(bottom: 10), 51 child: TextFormField( 52 style: const TextStyle( 53 fontSize: 13, 54 ), 55 obscureText: true, 56 decoration: InputDecoration( 57 labelText: "password",//** 58 hintText: "パスワード",//** 59 suffixIcon: IconButton(//** 60 icon: Icon(mask 61 ? FontAwesomeIcons.solidEye 62 : FontAwesomeIcons.solidEyeSlash), 63 onPressed: () { 64 mask = !mask; 65 }, 66 ), 67 labelStyle: const TextStyle( 68 fontSize: 15, 69 color: Color.fromARGB(255, 219, 219, 219), //labelの文字の色 70 ), 71 enabledBorder: OutlineInputBorder( 72 borderRadius: BorderRadius.circular(2), 73 borderSide: const BorderSide( 74 color: Color.fromARGB(255, 219, 219, 219), //outlineの文字の色 75 width: 1.0, 76 ), 77 ), 78 focusedBorder: OutlineInputBorder( 79 borderRadius: BorderRadius.circular(2), 80 borderSide: const BorderSide( 81 color: Color.fromARGB(255, 219, 219, 219), //outline-focusの色 82 width: 1.0, //outlineの太さ 83 )), 84 ), 85 )); 86 } 87}
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/08/13 16:43
2022/08/14 02:21