Flutter TextField 위젯 Style 예시

다양한 TextBox (TextInput) 예시

Sample

 

Sample

...(대충 위젯)
return Scaffold(
  appBar: AppBar(title: Text('TextField Sample')),
  body: Container(
    width: double.infinity,
    height: double.infinity,
    padding: EdgeInsets.all(10),
    child: Column(children: [
      TextField(
        decoration: InputDecoration(
          icon: Icon(Icons.star),
          hintText: 'Icon'
        ),
      ),

      TextField(
        decoration: InputDecoration(
          hintText: 'Border (Colors.green)',
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.green,
              width: 1.0,
            ),
          ),
        ),
      ),

      TextField(
        decoration: InputDecoration(
          hintText: 'Only underline',
          enabledBorder: UnderlineInputBorder(),
        ),
      ),

      TextField(
        decoration: InputDecoration(
          hintText: 'BorderRadius',
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
          ),
        ),
      ),

      TextField(
        decoration: InputDecoration(
          hintText: 'background color',
            filled: true,
            fillColor: Colors.blue.shade100,
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
            )
        ),
      ),

      TextField(
        decoration: InputDecoration(
            hintText: 'with label',
            helperText: 'helper',
            labelText: 'label',
            counterText: 'counter'
        ),
      ),
    ],),
  ),

 

---

ref.

 

https://www.youtube.com/@codingapple

코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!