TextField - 사용자로 부터 정보를 입력 받는 양식

TextField

사용자가 키보드를 이용하여 텍스트를 입력할 수 있도록 해준다;

 

standard, filled, outlined 3가지 형태가 있다.

 filled 형태는 배경색이 들어가 있고, outlined 형태는 테두리가 있습니다. 기본 형태인 standard는 배경색과 테두리 없이 밑줄만 표시됩니다 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

class SearchTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        cursorColor: Colors.grey, //마우스 커서 색깔
        decoration: InputDecoration(
          disabledBorder: _buildOutLineInputBorder(), //(inputDecorator)가 비활성화되고 오류가 표시되지 않을때 표시할 테두리
          enabledBorder: _buildOutLineInputBorder(), //(inputDecorator)가 활성화되고 오류가 표시되지 않을 때 표시할 테두리 
          focusedBorder: _buildOutLineInputBorder(), 
          filled: true, //배경색 설정
          fillColor: Colors.grey[200], //입력폼백그라운드 색깔 지정
          prefixIcon: Icon(
            //왼쪽에 Icon 배치
            CupertinoIcons.search,
            color: Colors.grey,
          ),
          contentPadding: const EdgeInsets.only(top: 15, bottom: 15), //입력폼 패딩
          hintText: '좌동 주변 가게를 찾아보세요.', //입력폼 텍스트 입력
          hintStyle: TextStyle(fontSize: 18), //입력폼 style(크기조정,컬러 등등 조정가능)
        ),
      ),
    );
  }

  OutlineInputBorder _buildOutLineInputBorder() {
    return OutlineInputBorder(
      borderSide:
          const BorderSide(width: 0.5, color: Color(0xFFD4D5DD)), //input 태그 테두리
      borderRadius: BorderRadius.circular(8.0), //input태그 모서리 둥글게
    );
  }
}