Develop/Flutter

[Flutter]17 글자입력란 TextField에 스타일주는 법

dawonny 2022. 5. 3. 03:28
728x90
반응형

ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의


TextField 옆에다가 아이콘을 넣고 싶으면

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.star),
  ),
),

테두리 주고 싶으면

TextField(
  decoration: InputDecoration(

    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.green,
        width: 1.0,
      ),
    ),

  ),
),

테두리 말고 밑줄만 주고 싶으면

TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(),
  ),
),

테두리 둥글게

TextField(
  decoration: InputDecoration(

    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
    ),

  ),
),

테두리 없애면서 배경색은 입히고 싶을 때

TextField(
  decoration: InputDecoration(

    filled: true,
    fillColor: Colors.blue.shade100,
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
    )

  ),
),

TextField 근처에 hint 띄우고 싶을 때

TextField(
  decoration: InputDecoration(
    hintText: 'hint',
    helperText: 'helper',
    labelText: 'label',
    counterText: 'counter'
  ),
),
728x90
반응형