5 - Flutter에서 TextField 꾸미기 (밑줄, 커서 없애기)

 

 

4 - Pixabay API를 이용하여 Flutter에서 이미지 사용하기(코드 포함)

지금까지의 작업을 통하여

1. 사용자에게 단어를 입력받고,

2. GPT로 부터 단어에 대한 쉬운 설명을 받고,

3. 단어에 대한 무료 이미지를 불러왔다.

 

이번에는 지금까지 만든 페이지에

디자인 작업을 해볼 것이다.

 

Figma: the collaborative interface design tool.

디자인 작업을 위해서는 Figma를 이용했다.

 

위 그림이 Figma로 작업한 디자인이다.

 

위 그림은 현재까지 개발된 페이지이다.

 

이번 시간에는 작업한 디자인대로

페이지를 꾸미기 위한 과정 중에,

 

사용자로부터 내용을 입력 받는

'TextField' 꾸미는 방법을 알아보겠다.

 

TextField(
  controller: controller,
  textAlign: TextAlign.center,
  style: const TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
  decoration: const InputDecoration(
    border: InputBorder.none
  ),
  showCursor: false,
),

 

'InputBorder.none' 구문은

입력 필드 주변 테두리를 없애준다.

 

'showCursor: false' 구문은

입력 필드의 커서를 숨겨준다.

 

결과로 나온 화면이다.

의도한대로 잘 디자인된 모습이다.