Flutter - 인별 클론 코딩 V1.0, 프로필 화면-1

컴퓨터가 뻑나서....어쩔 수 없는 포맷으로 한동안 복구하기위해 컴퓨터를 못함...오늘 어쩔수 없이 포맷 후 다시 시작.

 

프로필 화면

스택처럼 쌓이는게 아닌 자기가 올린글 부분과 다른사람이 올린 글에 태깅되어있는 부분이 나란히 있고 그 탭을 눌렀을때 보이는 구조이다. 글 올린 부분일때는 태깅된사진 탭 부분이 오른쪽으로 밀리고 태깅된 사진 탭 부분일때는 자기 글 탭 부분이 왼쪽으로 밀린다.

screens에 profile_page를 만들어주고 statefullwidget로 만들어줌. 클래스 명은 ProfilePage. 제대로 만들어졌나 확인하기 위해서, container에 text를 넣어주고 main_page에서 5번째 Container을 ProfilePage()로 바꿔준다. 핫리로드가 아닌 다시 실행을 하면 정상 작동하는것을 알 수 있다.

사이드 메뉴 부분은 스택처럼 쌓이는 메뉴지만 처음엔 보이지 않고 오른쪽에 밀려있다가 메뉴를 누르면 화면으로 들어오면서 위에 쌓이는 구조이다.

 

사이드메뉴 - 애니메이션

Scaffold로 만들고 그 안에 stack를 넣는다 그리고 children에 _sideMenu와 _profile을 넣어주면된다. side menu와 profile은 하단에 따로 위젯으로 만들어 준다. 이때 애니메이션을 주기 위해서  AnimatedContainer를 주고 duration 옵션 에 Duration으로 시간을 주면 된다.

그 외에도 애니메이션 시간이나 메뉴의 길이 메뉴가 열려있는지 등을 값을 준다.

 

---

  bool _menuOpend = false; //메뉴가 열리는지 확인해서 위치 이동
  Size _size;
  double menuWidth;
  double duration = 1;

---

그리고 모바일 화면의 사이즈를 알아야 메뉴와 프로필 페이지를 밀수 있으므로 다음 코드로 사이즈를 받아온다.

---

  _size = MediaQuery.of(context).size;

그리고 메뉴의 넓이는 _size의 2/3쯤 크기를 위해 _size.width/1.5로 해준다.

메뉴와 프로필의 animatedContainer에는 색과 curve로 애니메이션 모양을 주고, transform으로 x,y,z축의 변화를 준다. 이때 Matrix4.translationValues를 이용한다.

---

  Widget _sideMenu() {
    return AnimatedContainer(
      color: Colors.blueAccent,
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(
          _menuOpened ? _size.width - menuWidth : _size.width, 0, 0),
    );
  }

  Widget _profile() {
    return AnimatedContainer(
      color: Colors.amberAccent,
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(_menuOpened ? -menuWidth : 0, 0, 0),
    );
  }

---

이 두개의 창이 왔다 갔다 하는지 확인 하기 위해 우선 floatingactionbutton을 사용해서 확인해 본다.

---

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _menuOpend =
                !_menuOpend; //액션 버튼 클릭시 상태를 false true를 바꿔가면서 메뉴 보이고 안보이고 하게 해줌
          });
        },
      ),

---

scaffold에서 body,children의 밑에 넣어준다.

실행해보면 정상 작동하는걸 알수있고 curve에따라 모양이 바뀐다.

이제 다음시간에는 레이아웃을 만들어 보면 된다.