🗂

TextFormFieldのComponent

2024/05/06に公開

どうも!初心者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