[Flutter::Widget] TextField의 Border radius과 Background color를 fit하게 넣기

TextField

사진처럼 TextField에 테두리 color도 적용하고 Border radius도 적용한 상태에서 Boder radius에 fit한 Background color도 추가하고 싶었다. 아래의 코드를 보고 어느 프로퍼티에 넣는 지 확인해보자.

설명

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30),
    color: const Color.fromARGB(255, 236, 255, 237),
  ),
  child: TextField(
      (...CODE...)
  ),
)

우선 컨테이너로 TextField로 감싸야 한다. TextField의 내부에서 border radius에 맞게 background color를 찾는 게 더 깔끔할 거 같아서 존재하는 color 관련 프로퍼티를 모두 사용해봤는데 찾지 못했다. 후에 찾는다면 이 글에 업데이트 해줄 것이다.

 

참고로 Container의 color에 색을 지정하면 빨간화면 에러가 난다. 이유는 decoration 프로퍼티를 통해서도 색을 지정해줄 수 있는데 이 둘이 동시에 사용하면 안되도록 container.dart에 코드로 짜여져 있다. 빨간 에러를 통해 알 수 있지만 둘중 하나 적어도 null 값을 가져야 한다.

color == null ❘❘ decoration == null

Container(
  (...CODE...)
  child: TextField(
    decoration: InputDecoration(
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.green,
        ),
        borderRadius: BorderRadius.circular(30),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.green,
        ),
        borderRadius: BorderRadius.circular(30),
      ),
      labelText: 'Text',
      labelStyle: TextStyle(
        color: Colors.grey,
      ),
    ),
  ),
)

focusedBorder프로퍼티는 눌렀을 때(포커싱됐을 때) 통해 OutlineInputBorder의 border color를 지정할 수 있다.

enabledBorder프로퍼티는 기본적으로 일반(활성화되었을 때)상태의 정의이다.

이 부분의 값으로도 OutlineInputBorder의 border color를 지정할 수 있다.

전체 CODE

import 'package:flutter/material.dart';

void main() => runApp(BorderAndBackgroundColor());

class BorderAndBackgroundColor extends StatelessWidget {
  const BorderAndBackgroundColor({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'TextField',
              ),
              Padding(
                padding: EdgeInsets.all(20),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    color: const Color.fromARGB(255, 236, 255, 237),
                  ),
                  child: TextField(
                    decoration: InputDecoration(
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.green,
                        ),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.green,
                        ),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      labelText: 'Text',
                      labelStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}