Choe's In coding...

앱,웹 어디든 정말 자주쓰이는 기능중 하나인 무한스크롤, 스크롤 페이지네이션이다.

사용자의 스크롤을 인식하여 노출된 데이터 끝부분에 도달하였을때 다음 데이터를 호출하여 뿌려질수 있도록 하는 것이다.

본 글에선 GetX를 이용하여 구현하였다.

먼저 ListView 안에 컨트롤을 등록시켜줘야하는데 먼저 컨트롤러를 만들자

해당 컨트롤러를 View 페이지에 등록을 해준뒤

ListView 컨트롤러에 등록하면 된다.

컨트롤러 안 onInit를 통해 사용자의 스크롤을 인식해야한다.

.addListener를 통해 인식할 수 있으며

position.pixels과  position.maxScrollExtent를 통해

사용자가 스크롤를 통해 출력된 데이터 가장 끝(하단)에 도달했다라는 것을 인식할수 있다.

그럼 이제 해당 if문 안에는 새로운 데이터를 호출하는 기능이 들어가야한다.

먼저 본인이 사용하는 api를 분석해보자

필요한 파타미터로는

userId = 앱 최초 로그인시 지정되며 변함없는 값이다.

page = 몇 번째 페이지의 데이터를 가져올것인가

limit = 한 페이지에 불러오는 데이터 최대갯수이다.

자 그럼 여기서 다뤄야할 것은 무엇인가?

바로 page이다.

이미 프로젝트에선 최대 5개(limit)로 픽스 해놨다.

유저의 데이터가 총 12개라고 가정해본다면

1 page  [1,2,3,4,5]

2 page [6,7,8,9,10]

3 page [11,12]

이렇게 호출될것이며

최초 1 page를 호출 받은 상태에서 

스크롤를 최하단으로 내린다면

2 page의 데이터를 새로받는 형식

으로 구현되면 될것이다.

View 페이지로 이동시

최초 1회는 1 page 호출

그다음부터는 page를 1씩 더해 호출하여 기존 리스트에 add하는 방식이면 된다.

여기서 중요한것이 하나 있다.

무의미한 api 호출  데이터가 없는 페이지는 호출할 필요가 없지 않겠는가?

fetchdata할때마다 받은 데이터가 비어있다면

더 이상 스크롤을 감지할 필요가 없을것이다.

팀프로젝트인 만큼 전체 코드는 올리지 못한다.

컴퓨터에 조금 관심이 있는 사람들이라면

http 와 https 에 대해 많이 들어봤을것이다.

쉽게 말하면 htttp에서 보안이 강화된게 https이다.

따라서 많은 홈페이지들이 https 로 변환하였고

여럿 소프트웨어에서도 http에 대한 접근을 지양하고 있다.

안드로이드 버전들이 업그레이드 됨에 따라 

보안도 많이 강화가 됐고 이 과정에서 http에 대한 접근을 막아뒀다.

아래 문서를에서 확인이 가능하다.

https://developer.android.com/training/articles/security-config#CertificatePinning 

따라서 앱개발 할때 http에 대한 접근을 허용하게 하려면 따로 설정을 해줘야한다.

모든 Http URL 접근 허용

프로젝트/android/app/src/main/AndroidManifest.xml

해당 파일에 들어가

사진처럼

<application

              android:usesCleartextTraffic="true"

넣어주면 된다.

플러터에서 가장 많이 쓰이는 위젯중 하나는 Listview일것이다.

이 위젯과 같이 쓰이는 찰떡 위젯은 ExpansionTile이다.

그런데 해당 위젯으로 구성하면

타일 부분을 터치하며 스크롤하면 먹히지 않는다.

따라서 타일이 그려지지 않는 영역을 터치하여 스크롤해야한다.

앱을 빌드해보면 정말 별로다...

열심히 구글링한 결과 역시나 방법은 있었다.

우선 해당 위젯을 Stateful Widget으로 변경해줘야한다.

다음 리스트뷰안에 컨트롤러를 등록해주고

ListView.builder(
 controller: _scrollController,
 ...
 ...
 ...

컨트롤러를 작성해주면 끝난다.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ScrollController _scrollController = ScrollController();

  void _scrollToSelectedContent(bool isExpanded, double previousOffset, int index, GlobalKey myKey) {
    final keyContext = myKey.currentContext;

    if (keyContext != null) {
      // make sure that your widget is visible
      final box = keyContext.findRenderObject() as RenderBox;
      _scrollController.animateTo(isExpanded ? (box.size.height * index) : previousOffset,
          duration: Duration(milliseconds: 500), curve: Curves.linear);
    }
  }

 해주고나니 정말 속이 시원해졌다...

지난번 api.ApiException: 7과 같은 와이파이 오류이다...

에뮬의 와이파이를 껏다키면 해결된다.

구글에 검색을 하니

AndroidManifest.xml 파일을 수정하라고 나오는데

일단 와이파이 만져보고 안되면 2번째로 해보라

해당 파일의 경로는

/android/app/src/main/AndroidManifest.xml 이다.

해당 파일에

<uses-permission android:name="android.permission.INTERNET"/>

한줄 추가 시켜주자

디자인 작업이 생각보다 오래 걸린다... ㅜㅜ
이번에 따라한 디자인이 가장 오래 걸린것 같다.

디자인을 구성하는 방법은 여러가지가 있지만

아직 몇가지 안되는 방법으로 구현하려다 보니 시간도 길고 코드의 길이도 길어지기만 하는것같다.

다양한 디자인을 만드는것보단 하나의 디자인을 깊게 이해하고 최적화시키는 노력이 필요하다.

https://dribbble.com/shots/20342041-Spire-Tracker-Task-Management-App

https://github.com/tngudzzz/layout_TaskmanageApp

오늘은 어떤 디자인을 만들어볼까나

찾아보던중 눈에 띄는 여행 티켓 관리앱이 눈에 보였고

크게 어려워 보이지 않았다.

이번에는 네비게이션바도 제작하였다.

https://dribbble.com/shots/20193355-Flight-Booking-Mobile-IOS-App

https://github.com/tngudzzz/layout_boardingApp