Choe's In coding...

플러터로 간단한 To-Do 앱을 하나 만드려고 한다.

이앱은 켈린더를 이용하기에 먼저 구현중인데..

사진과 같이 좌우 스크롤로 날짜를 고를 수 있는 영역을 구현중이다.

사진과 같이 완벽하게 따라하진 못하겠지만

나 나름대로의 방법대로 구현해봤다.

date를 눌르때마다

앞뒤로 총 해당 월의 일수(31개) 만큼 나오며

캘린더를 눌렀을 시엔

빠르게 년, 월, 일 선택 가능하다.

구현하는데 다소 어려웠던 점이 있다면

사용자가 date를 눌렀을때

해당 date가 화면 정가운데(리스트 한가운데)에 위치하여 스크롤을 제어할수있게 하는것이였다.

완벽하게 구현된것은 아니나

내가 짠 방법을 공유하도록 하겠다.

먼저 ListView에 Controller를 등록시켜준뒤

Controller.animateTo를 이용하면 된다.

scrollController.animateTo(
                (scrollController.position.viewportDimension +
                        scrollController.position.maxScrollExtent) *
                    13 /
                    31,
                duration: const Duration(seconds: 1),
                curve: Curves.ease);

쉽게 풀어 설명하자면

스크롤 영역을 감지하여

31개 리스트중 13번째 리스트를 화면 맨 앞에 위치하는것이다.

사진을 보면 이해가 빠르다.

맨 앞쪽에 위치한 Sun 12 리스트가 바로 13번째

리스트이다.

물론 나는 15번째 리스트인 Tue 14를 픽했다.

플러터에서 가장 많이 쓰이는 위젯중 하나는 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);
    }
  }

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

날이 쌀쌀하다~

실내는 뜨듯하다..

노곤노곤해지는 환절기이다.

얼른 구상중인 개인 프로젝트를 진행하고싶지만 노트북이 많이 버벅이기 때문에,,,

맥북으로 넘어사는대로 진행해야겠다.

이번시간에는 ListView.builder이다. 기존 ListView와 다른점은 좀더 많은 양의 데이터를 처리할때 효과적이다.

이번에 만든 앱이다. 크게 appbar와 body-ListView.bulider로 구성되어있다.

우선적으로 ListView에 사용될 이미지를 assets 시켜주자

https://github.com/icodingchef/listview_lecture - 유튜브 코딩셰프님의 자료이다.

이미지 assets가 완료되었으면

첫 화면에 뿌려질 페이지를 STF위젯으로 만들어준다.

appbar 구성이며 별거없다. body 부분과 일체감을 주기위해 배경색과 elevation을 다음과같이 지정했다.

 var titleList = [
    'Dentist',
    'Pharmacist',
    'School teacher',
    'IT manager',
    'Account',
    'Lawyer',
    'Hairdresser',
    'Physician',
    'Web developer',
    'Medical Secretary'
  ];

  var imageList = [
    'assets/1.png',
    'assets/2.png',
    'assets/3.png',
    'assets/4.png',
    'assets/5.png',
    'assets/6.png',
    'assets/7.png',
    'assets/8.png',
    'assets/9.png',
    'assets/10.png'
  ];

  var description = [
    '1.There are different types of careers you can pursue in your life. Which one will it be?',
    '2.There are different types of careers you can pursue in your life. Which one will it be?',
    '3.There are different types of careers you can pursue in your life. Which one will it be?',
    '4.There are different types of careers you can pursue in your life. Which one will it be?',
    '5.There are different types of careers you can pursue in your life. Which one will it be?',
    '6.There are different types of careers you can pursue in your life. Which one will it be?',
    '7.There are different types of careers you can pursue in your life. Which one will it be?',
    '8.There are different types of careers you can pursue in your life. Which one will it be?',
    '9.There are different types of careers you can pursue in your life. Which one will it be?',
    '10.There are different types of careers you can pursue in your life. Which one will it be?'
  ];

ListView에 사용될 데이터들이다. 이미지들의 경로만 다를 수 있고 나머진 복붙하여주면 된다.

클래스내에 작성해주자

body 부분이다.

여기서 return 시켜주는 GestureDetector는 각 타일을 눌렀을때 실행되는 onTap 함수를 위해 사용되었으며 Card를 통해 아이템을 뿌려준다.

Card 부분을 보면 크게 Row로 2개 그리고 2번째 Row에는 Colum으로 3개를 그리고있다.

코드와 같이 Text, SizedBox, Text 위젯 3개로 구성되며 3번째 Text위젯은 사이즈 조절을 위해 SizedBox로 감싸줬다. 이렇게 3가지 위젯을 Padding을 감싸줬다.

showDialog 구현해보자

GestureDetector - onTap 안에 탭하면  showPopup을 실행하고 인자값을 전달한다.

인자값을 이용하여 Dialog를 리턴시켜주며

강의를 듣고 따라할때마다 점점 손에 익숙해지는것 같다.

이정도 레벨은 그냥 강의 소리만 들으면서 클론코딩 할 수 있는 정도이다.