본문 바로가기
Flutter/개발

[플러터] 메모 앱 개발하기 TextField 위젯

by ESTP 개발자 2023. 5. 3.

TextField

- 글 입력 받는 위젯

- 속성
    - decoration : InputDecoration()

    - maxLines : 

- 쓴 글 받아오는 방법

    주의사항 : const가 붙으면 받아오기가 안됩니다.!!! 이걸로 몇분을 답답해했는지...

    방법 1) onChanged()

    방법 2) Controller

 

TextField 입력시 키보드가 가리는 문제

 

Stateless에서 Stateful로 바꾸는 방법

 

안드로이드 APK 빌드하기

 


body는 Column

mainAxisSize는 min

제목 : 1줄만 보여주기위해서 TextField의 maxLines는 1 

크게 보여주기 위해서 TextStyle 위젯에 fontSize는 20

 

TextField 값 관리

TextEditingController를 만들어준다.

_NoteEditPageState 클래스 아래 @override의 위에 final TextEditingController titleController=TextEditingController();

를 만들어주고 

제목이랑 내용 사이에 SizedBox 만들어주고

TextField의 controller 속성에 titleController를 넣어준다.

 

본문 부분

내용도 TextField로 만들어준다.

테두리를 없애준다 hintText('내용 입력');

maxLines는 null로

엔터로 다음줄로 넘어가게 하기 위해 keyboardType TextInput.multiline을 넣어준다.

마찬가지로 TextEditingController를 bodyController로 위에 똑같이 만들어주고, controller에 속성을 넣어준다.

column을 SingChildSrollView로 감싸주고 padding 속성에 horizontal을 12, vertical에 16을 넣어준다. = 본문 내용 길어지면 overflow 에러 나는거 수정

 

플러터 괄호때문에 스트레스 안 받아도 됨 wow 위젯 추가, 삭제 easy 합니다~

윈) alt + Enter 

맥) option + Enter

Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 1. 기본 설치 및 간단한 위젯 (tistory.com)

Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 3. 메모 작성 화면 만들기 (tistory.com)

 

다트패드로 앱을 배포했대 말이 되나

https://origogi.github.io/flutter/Flutter-DartPad-%EC%97%B0%EB%8F%99/

댓글