[flutter]TextFormField,Padding,Margin

미미제이·2024년 9월 9일

flutter

목록 보기
6/7

TextField

텍스트를 입력받기 위해 사용
텍스트필드에서 값을 입력받으면 텍스트에딧팅컨트롤러 사용해야함.
텍스트필드가 많으면 여러 컨트롤러 필요함 -> 관리 어려움

TextFormField

유효성 검사 쉽게 할 수 있음
쉽게 밸리데이션 값 등을 받아올수 있음.

 Form(
                        child: Column(
                          children: [
                            TextFormField(
                              key: ValueKey(4),
                              decoration: InputDecoration(
                                  prefixIcon: Icon(
                                    Icons.email,
                                    color: Palette.iconColor,
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Palette.textColor1,
                                    ),
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(35),
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Palette.textColor1,
                                    ),
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(35),
                                    ),
                                  ),
                                  hintText: '이메일',
                                  hintStyle: TextStyle(
                                    fontSize: 14,
                                    color: Palette.textColor1,
                                  ),
                                  contentPadding: EdgeInsets.all(10)),
                            ),
                            SizedBox(height: 8),

Padding

padding은 위젯 내부의 여백을 말합니다. 위젯의 경계와 그 안에 포함된 콘텐츠 사이에 공간을 만드는 역할을 합니다. padding을 사용하면 위젯의 경계 안에서 콘텐츠를 일정 간격만큼 떨어뜨려 배치할 수 있습니다.

위치: 위젯 내부에 위치하는 콘텐츠와 위젯 경계 사이의 간격을 의미합니다.
사용 예: 텍스트, 이미지 등이 위젯 경계에서 떨어져 있게 하고 싶을 때 사용.

Margin

margin은 위젯 외부의 여백을 말합니다. 위젯과 다른 위젯(또는 부모 컨테이너) 사이의 간격을 설정할 때 사용됩니다. margin을 사용하면 위젯이 배치되는 공간 외부에 여백을 둘 수 있습니다.

위치: 위젯 바깥쪽과 다른 위젯 또는 부모 사이의 간격을 의미합니다.
사용 예: 위젯과 다른 위젯 사이의 간격을 만들고 싶을 때 사용.

시각적 차이점
padding은 위젯 안쪽에서의 간격을 조정하여 위젯의 콘텐츠가 안쪽으로 밀려납니다.
margin은 위젯 밖에서 간격을 만들어 다른 위젯들과의 거리를 조정합니다.

profile
기록하는 미미

0개의 댓글