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

프로필 앱바

프로필 위젯안에 만든다. 근데 child에 Column에 넣으면 상단바에 겹치므로 safearea에 Column을 넣어주면 된다. floating button에 도 삭제해주고 icon 버튼에 menuopened의 상태를 확인하는 setState도 옮겨준다. 정상작동하는것을 볼 수 있다. 프로필 아이디에 왼쪽에 common_gap을 패딩으로 주고 메뉴는 grey[200]으로, 프로필은 transparent로 색을 변경해준다. text도 font를 bold와 size를 20으로 변경해준다. 아래와 같이 변경 해주면 된다.

---

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

  Widget _profile() {
    return AnimatedContainer(
      color: Colors.transparent,
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(_menuOpened ? -menuWidth : 0, 0, 0),
      child: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Padding(
                      padding: const EdgeInsets.only(left: common_gap),
                      child: Text(
                        'username',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 20,),
                      )),
                ),
                IconButton(
                  onPressed: () {
                    setState(() {
                      //액션 버튼 클릭시 상태를 false true를 바꿔가면서 메뉴 보이고 안보이고 하게 해줌
                      _menuOpened = !_menuOpened;
                    });
                  },
                  icon: Icon(Icons.menu),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

---

사이드 메뉴 레이아웃 만들기

일단 row 부분을 메소드로 리팩터 해준다. _usernameIconButton(). 이제 사이드 메뉴를 준다. 그냥 Column으로 하면 safeArea가 없어서 위로 올라가게 되고 색을 보면 text크기만큼 색이 되있는것을 알 수 있다. AnimatedContainer에 widht를 줘도 넓어 지지 않는다. Column의 사이즈를 키워야 한다. Column의 mainAxisAlignment를 맥스 사이즈로 줘도 변경 되지 않는데, Column을 SizedBox로 감싸서 width를 주면 된다. 그외에도 패딩을 주고 CrossAxisAlignment를 줘서 왼쪽정렬을 해주면 된다. 그런데 센터가 잘 안잡혀서.... 나온 부분을 모두 지우고 FlatButton으로 묶어준다(flutter 2.0에서는 다른버튼으로 변경해주면 된다.)

---

  Widget _sideMenu() {
    return AnimatedContainer(
      width: menuWidth,
      color: Colors.grey[200],
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(
          _menuOpened ? _size.width - menuWidth : _size.width, 0, 0),
      child: SafeArea(
        child: SizedBox(
          width: menuWidth,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FlatButton(
                onPressed: () {},
                child: Text('username'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _profile() {
    return AnimatedContainer(
      color: Colors.transparent,
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(_menuOpened ? -menuWidth : 0, 0, 0),
      child: SafeArea(
        child: Column(
          children: [
            _usernameIconButton(),
          ],
        ),
      ),
    );
  }

  Row _usernameIconButton() {
    return Row(
      children: [
        Expanded(
          child: Padding(
              padding: const EdgeInsets.only(left: common_gap),
              child: Text(
                'username',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20,
                ),
              )),
        ),
        IconButton(
          onPressed: () {
            setState(() {
              //액션 버튼 클릭시 상태를 false true를 바꿔가면서 메뉴 보이고 안보이고 하게 해줌
              _menuOpened = !_menuOpened;
            });
          },
          icon: Icon(Icons.menu),
        ),
      ],
    );
  }

---

정리한 부분까지의 코드이다.

커스텀 스크롤 뷰

스크롤이 가능한 뷰는 슬리버라는 위젯을 사용해야함. Slivers. 이걸 넣을 수 있는 곳이 CustomScrollView라는게 있음. 무한스크롤이 되는것이라고 생각하면됨. Expanded 안에 child로 CustomScrollView를 넣고 slivers 옵션에 SliverList를 해서 넣어줌. 그럼 그안에 delegate라는 옵션이 있는데 여기를 SliverChildListDelegate를 넣어줌. SliverChildListDelegate는 children처럼 바로 그 안에 채워주면 됨. _coloredContainers 라는 위젯을 만들어서 넣어줌. _coloredContainers는 List<Widget>로 List<Widget>.generate로 안에 숫자 만큼 반복해줌. generate는 약간 for나 while랑 비슷해 보임.

---

  Widget _profile() {
    return AnimatedContainer(
      color: Colors.transparent,
      curve: Curves.easeInOut,
      duration: Duration(
        seconds: duration,
      ),
      transform: Matrix4.translationValues(_menuOpened ? -menuWidth : 0, 0, 0),
      child: SafeArea(
        child: Column(
          children: [
            _usernameIconButton(),
            Expanded(child: CustomScrollView( //slivers를 사용하기 위해서 customscrollview를 사용 앱바같은 위에 빼고 나머지 차지하기위해 expanded사용
              slivers: [
                //children과 비슷
                SliverList(delegate: SliverChildListDelegate(
                  //여기는 children 할 필요없이 그냥 children처럼 집어넣으면 됨
                  _coloredContainers(),
                ),)
              ],
            ),)
          ],
        ),
      ),
    );
  }
  List<Widget> _coloredContainers(){
    return List<Widget>.generate(
      20,
        (i) => Container(
          height: 150,
            color: Colors.primaries[i % Colors.primaries.length],
        )
    );
  }

---

색도 여러개 보여주면서 실행해 보면 무한 스크롤로 갯수만큼 작동하는 것을 볼 수 있음.

 

프로필 헤더 사진 레이아웃

일단 색깔을 주는 부분을 다 지우고 _getProfileHeader를 get 으로 불러온다. CircleAvatar로 만들고 backgroundImage는 피드에서 사용했던 NetworkImage에 getProfileImagPath에 아무 텍스트를 넣어서 가져온다. radius는 40으로 주면 된다.

---

                slivers: [
                  //children과 비슷
                  SliverList(
                    delegate: SliverChildListDelegate([
                      //여기는 children 할 필요없이 그냥 children처럼 집어넣으면 됨
                      _getProfileHeader,
                    ]),
                  ),
                  
  Row get _getProfileHeader => Row(
        children: [
          Padding(
            padding: const EdgeInsets.all(common_gap),
            child: CircleAvatar(
              radius: 40,
              backgroundImage: NetworkImage(getProfileImgPath('username')),
            ),
          ),
        ],
      );

---

여기서 get & set 은 get은 값을 가져갈때 set은 값을 변경 해줄때 사용해 줌.

 

프로필 헤더 information 은 다음에 이어서...