Flutter 기본-16. 채팅앱 - TextFormField, inline if, AnimatedPositioned

 

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

 

 

background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers

 

---

 

1. TextFormField

 

Login, Signup 버튼을 생성한 Row 아래에, 상위 Colmun의 children으로 Container를 추가해준다. Form 위젯을 추가하고 TextFormField를 추가한다. decoration 옵션으로 InputDecoration 위젯을 설정한 후 OutlineInputBorder 위젯으로 디자인을 지정해준다. 아래 그림은 enabledBorder 속성만 적용했을 경우 작동 방식이다. focusedBorder 속성을 추가하여 입력을 위해 focus 되었을 때에도 OutlineInputBorder가 적용되도록 할 수 있다.

 

Container(
  child: Form(
    child: Column(
      children: [
        TextFormField(
          decoration: InputDecoration(
            prefixIcon: Icon(
                Icons.account_circle,
              color: Palette.iconColor,
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: Palette.textColor1
              ),
              borderRadius: BorderRadius.all(
                  Radius.circular(35.0)
              )
            ),
            focusedBorder:
            OutlineInputBorder(
                borderSide: BorderSide(
                    color: Palette.textColor1
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(35.0)
                )
            ),
          ),
        )
      ],
    ),
  )
)

 

 

hint

마지막으로 hintText, contentPadding을 주어 마무리하고, 앞서 작성한 상위 Container에서 margin을 EdgeInsets.only(top: 20)을 주어 마무리한다.

 

 

hintText: 'User name',
hintStyle: TextStyle(
  fontSize: 14,
  color: Palette.textColor1
),
contentPadding: EdgeInsets.all(10)

 

 

 

2. Submit button

 

우선 TextFormField 및 SizedBox를 복사, 붙여넣기하여 3개의 입력 칸을 만들고 상위 Positioned를 접어놓는다.

 

Submit 버튼 만들기

submit 버튼을 만들기 위해서 Positioned 위젯을 추가한다. 그냥 Container를 사용하면 자식요소의 크기만큼 가로를 다 차지하기 때문에 Center 위젯으로 감싼다.

Center위젯 적용전후

Positioned(
  top: 430,
    right: 0,
    left: 0,
    child: Center(
      child: Container(
        padding: EdgeInsets.all(15),
  height: 90,
  width: 90,
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(50)
  ),
  child: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Colors.brown,
            Colors.amber,
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(30),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 1,
            offset: Offset(0,1)
          )
        ]
      ),
    child: Icon(
        Icons.arrow_forward,
      color: Colors.white,
    ),
  ),
),
    )
)

 

LinearGradient, BoxShadow 등 새로운 위젯도 추가되었다.

바깥쪽은 하얀색, 안쪽은 gradient가 들어간 원형인 것은 바깥쪽 Container에 padding을 주었기 때문이다.

 

 

 

3. Social Signup

 

맨 아래쪽 Social Signup을 구현한다. 이 부분도 역시 Positioned로 구현한다. MediaQuery를 이용해서 화면 위에서부터의 높이를 정했다. 그리고 TextButton.styleFrom에서 foregroundColor, backgroundColor를 사용하였다.

Positioned(
  top: MediaQuery.of(context).size.height-125,
  right: 0,
  left: 0,
  child: Column(
    children: [
      Text('or Signup with'),
      SizedBox(
        height: 10,
      ),
      TextButton.icon(
          onPressed: (){},
          style: TextButton.styleFrom(
            foregroundColor: Colors.white,
            backgroundColor: Palette.googleColor,
            minimumSize: Size(155, 40),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20)
            )
          ),
          icon: Icon(Icons.add),
          label: Text('Google'),
      )
    ],
  ),
)

 

추가로 삼항연산자를 사용하여 background 화면쪽의 Text가 LOGIN/SIGNUP 여부에 따라 바뀌게 해줄 수 있다.

text: isSignupScreen ? ' to Chicken Chat' : ' back',

 

 

 

4. inline if

inline if 문법을 Container위에 적용하여 Container 위젯 표시 여부를 결정할 수 있다.

 

이제 inline if문이 적용된 Container 밑에 if(!isSignupScreen)을 추가해주고, 그 아래에 다른 Container를 추가하면된다. 어짜피 기본 구성은 같으니 코드는 생략한다.

 

 

 

이제 입력 TextFormField의 개수가 줄어들면 입력창의 크기도 줄어들도록 만들고 SubmitButton의 위치도 변경되게 한다. 위에서 배운 삼항연산자를 사용하면 된다. prefixIcon과 hintText도 알맞게 변경했다.

 

Positioned(
  top: 180,
    child: Container(
  height: isSignupScreen? 280.0 : 240.0,

Positioned(
  top: isSignupScreen? 430 : 390,

 

 

5. AnimatedPositioned, AnimatedContainer

 

이제 애니메이션 효과를 주기 위해서 AnimatedPositioned 위젯, AnimatedContainer 위젯을 적용한다.

Submit 버튼은 크기 변경이 필요없으므로 AnimatedPositioned 위젯만 적용하면 된다. Container의 크기 변경이 필요한 경우에만 AnimatedContainer를 사용하면 된다.