🗂
TextFormFieldのComponent
どうも!初心者flutterプログラマーのちゃきです!
今回は、textformfieldのデザインを変えたい時に使えるcomponentを作ってみました⭐️
自分用にメモしておきます。
import 'package:flutter/material.dart';
import '../config/utils/radius/box_decoration_radius.dart';
import '../config/utils/sized_box/width_sized_box.dart';
class EllipseTextFormField extends StatelessWidget {
const EllipseTextFormField({
super.key,
//ラベルとフォーム内のテキスト
required this.labelText, //ラベルテキスト
required this.hintText, //テキストフォームフィールドの中のテキスト
//コントローラー
required this.controller, //コントローラー
//文字数制限
required this.maxLength,
});
final TextEditingController controller;
final int maxLength;
final String labelText;
final String hintText;
@override
Widget build(BuildContext context) {
return SizedBox(
width: WidthSizedBox.extraLarge,
child: TextFormField(
validator: (value) { //validatorをつける
if (value == null ||
value.isEmpty ||
controller.text.trim().isEmpty) {
return '文字を入力してください';
}
return null;
},
maxLength: maxLength,
controller: controller,
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
filled: true,
border: OutlineInputBorder(
//ここでテキストフォームフィールドのかどを丸くできます。
borderRadius: BoxDecorationRadius.circularLarge,
),
// フォーカスされていないときの枠線設定
enabledBorder: OutlineInputBorder(
borderRadius: BoxDecorationRadius.circularLarge, // 枠線の角を丸くする
),
// フォーカスされているときの枠線設定
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 2.0), // 青色の太い枠線
borderRadius: BoxDecorationRadius.circularLarge, // 枠線の角を丸くする
),
),
),
);
}
}
Discussion