flutter _ TextField (fillColor, border,icon)

TextField

TextField / TextFormField 위젯은 많이 사용되는 위젯이다. 이메일, 비밀번호, 전화, 집 주소 등과 같은 다양한 형태로 사용자 입력을 받는데 사용된다.

TextField _ decoration

TextField에 테두리와같은 스타일을 지정하기위해 decoration 속성을 추가해준다. 이를 활용하여 아래와 같은 스타일을 만들어 볼 것이다.

InputDecoration class

Material Design 텍스트 필드를 장식하는데 사용되는 테두리, 레이블, 아이콘 및 스타일이다.

fillColor

TextField의 색상을 변경한다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @ override
  Widget build (BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
      home: Main(),
    );
  }
}

class Main extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
          //TextField 위젯을 생성해주었다.
            TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.black12,
              ),
            )
          ],
        )
      ),
    );
  }
}

• 결과
  

그런데 아래에 border가 생성되었고 글자를 입력하면 색상이 변하기까지 한다.ㄷㄷ

borderSide

decoration: InputDecoration(
                filled: true,
                fillColor: Colors.black12,
                
                enableBorder: OutlineInputBorder(
                	borderSide: Borderside.none,
                    //border가 사라지게된다.
                )
              ),

• 결과
  

그치만 글자를 입력하려고 커서를 클릭하면 여전히 border가 생긴다.

포커스 됐을 때 border 없애기

decoration: InputDecoration(
                filled: true,
                fillColor: Colors.black12,
                
                enableBorder: OutlineInputBorder(
                	borderSide: Borderside.none,
                    //border가 사라지게된다.
                ),
                
                //포커스 됐을 때 스타일을 설정해준다.
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                ),
              ),

• 결과
  커서가 올라가도 border가 생기지 않는다.
  

borderRadius

decoration: InputDecoration(
                filled: true,
                fillColor: Colors.black12,
                
                enableBorder: OutlineInputBorder(
                	borderSide: Borderside.none,
                    borderRadius: BorderRadius.circular(100),
                    //border-radius가 적용된다.
                ),
                
                //포커스 됐을 때 스타일을 설정해준다.
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(100),
                ),
              ),

• 결과
  포커스 됐을 때도 추가로 같이 적용해주었다.
  

➕ borderRadius 방향

• 한 쪽에만 borderRadius를 적용할 때

borderRadius: BorderRadius.only(
	topLeft: Radius.circular(30),
    //왼쪽위에 모서리에만 radius 30이 적용된다.
),

• 두 방향 이상 borderRadius를 적용할 때

borderRadius: BorderRadius.only(
	topLeft: Radius.circular(30),
    topRight: Radius.circular(50),
    //왼쪽위 모서리에 radius 30, 오른쪽위 모서리에 radius 50이 적용된다.
),

icon

• icon: _ 필드의 왼쪽에 표시되는 아이콘
• prefixIcon: _ 필드 내부 왼쪽에 표시되는 아이콘
• suffixIcon: _ 필드 내부 오른쪽에 표시되는 아이콘

suffixIcon

내가 원하는 모양은 필드 내부 오른쪽에 아이콘을 넣는 것이므로 아래처럼 작성해주었다.

decoration: InputDecoration(
                filled: true,
                fillColor: Colors.black12,
                suffixIcon: Icon(Icons.search),
                //오른쪽에 검색 아이콘 표시
                
                enableBorder: OutlineInputBorder(
                	borderSide: Borderside.none,
                    borderRadius: BorderRadius.circular(100),
                ),
                
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(100),
                ),
              ),

• 결과
  

➕ InputDecoration 속성 더보기 > click