💁

TextFormFieldの外枠を整えたい

2024/06/18に公開

Flutter

Dart

tech

Tips💡

TextFormFieldを角丸の枠で囲まれている入力フォームにしたいが、この書き方だと、内側に横線が出てしまう問題が出てきた💦
違和感ある。外枠にしか線いらないんですよ。

[これだと違和感ある]

Container(
        width: 300.w,
        height: 50.h,
        decoration: BoxDecoration(
          border: Border.all(color: AppColor.navy),
          borderRadius: BorderRadius.circular(5),
        ),
        child: TextFormField(
          controller: goalNameController,
        ),
      ),

[border: InputBorder.noneを追加して、修正すると解決]

Container(
  width: 300.w,
  height: 50.h,
  decoration: BoxDecoration(
    border: Border.all(color: AppColor.navy),
    borderRadius: BorderRadius.circular(5),
  ),
  child: TextFormField(
    controller: goalNameController,
    decoration: InputDecoration(
      border: InputBorder.none,
    ),
  ),
),

これで外側に角丸の枠線が作られて、内側の下の方に、横線があったのが消えました。よく入力フォーム作るのですが、いろんなパターンに対応したテンプレート作らないと毎回調べながら作るので、大変です笑

Tips💡

Discussion