【Flutter】입력 폼의 색을 변경해 본다(InputDecoration)
TextFormField가 필요합니다.그 중의
decoration 에, InputDecoration 를 부여시키는 것으로, 입력 폼을 다양한 스타일에 커스터마이즈 하는 것이 가능하게 됩니다.이번에는 입력 폼의 색( 가장자리 안)을 변경하겠습니다.
입력 양식의 색상 변경
우선은, 기본이 되는 입력 폼을 작성해 갑니다.
입력 양식 작성
아래 코드에서 가장자리를 둘러싼 입력 양식을 사용할 수 있습니다.
...
Expanded(
child: TextFormField(
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
hintText: 'メッセージをおくる',
),
...
위의 코드에서는 키보드가 표시되어 있을 때와 키보드가 표시되어 있을 때의 스타일을 부여하고 있습니다.
입력 양식에 색상 부여
아래 코드에서 실제로 입력 양식에 색상을 부여하고 있습니다.
...
Expanded(
child: TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xff005dff),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
hintText: 'メッセージをおくる',
),
...
filled 를 true 로 설정한 다음 fillColor 에 색상을 설정하여 입력 양식에 색상을 부여할 수 있습니다.
이제 입력 양식의 색상을 변경할 수 있습니다.
애플리케이션 디자인에 맞는 입력 양식을 사용자 정의할 수 있습니다.
Reference
이 문제에 관하여(【Flutter】입력 폼의 색을 변경해 본다(InputDecoration)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KenAra/items/cf6b540ec535469bcc6e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
