[플러터] TextField 사이즈 조절하기

플러터 속 TextField 입력 칸 크기를 조절하는 방법입니다.

저는 처음에 Padding을 사용하였습니다.
예를 들어,

	이름: _________ 

라고 되어 있으면 오른쪽에 padding 값을 부여해서 크기를 조절할 수 있었어요.

근데 이렇게하면 사용자의 핸드폰 화면 크기에 따라 여백 공간 간격이 달라져서 텍스트필드 입력 칸이 좁아지거나 사라지는 오류가 나더라고요.

그래서 저는 padding이 아닌, Container로 텍스트필드 크기를 수정해줬습니다.

Container로 TextField 크기 바꾸기

1. TextField를 Container로 둘러싸기

• 저는 Flexible로 먼저 둘러싸놨기 때문에 Flexible을 Container로 감싸줬습니다.

Container(
	child: new Flexible(
    	child: new TextField(
        	controller: name,
            style: Theme.of(context).textTheme.bodyText1,
       ),
    ),
),

2. Container안에 width를 사용하여 원하는 길이 조절해주기

Container(
	child: new Flexible(
    	child: new TextField(
        	controller: name,
            style: Theme.of(context).textTheme.bodyText1,
       ),
    ),
    width: 150, //TextField 크기
),

width에 써준 값에 따라 TextField 입력칸의 크기가 달라집니다.

=====================================================

응용 예시

         Row(
              children: <Widget>[
                SizedBox(width: 41,),
                new Text(
                  "이름",
                  textAlign: TextAlign.left,
                  style: TextStyle(fontFamily: 'jua', fontSize: 20),
                ),
                SizedBox(width: 40,),
                Container(
                  child: new Flexible(
                    child: new TextField(
                      controller: name,
                      style: Theme.of(context).textTheme.bodyText1,
                    ),
                  ),
                  width: 150, //TextField 크기
                ),
              ],
            ),

결과물