안녕하세요~ totally 개발자입니다. GridView.builder 저번 시간에 GridView 위젯에 대해서 알아보았고 ListView.builder처럼 GridView도 GridView.builder도 효율적으로 코드를 구성할 수 있습니다. 기존 GridView로 코드를 구성했던 모습입니다. 53번째부터 60번째 줄을 보면 postContainer 메소드가 8번 반복되고 있는 것을 알 수 있습니다. 이것을 GridView.builder를 이용하면 코드를 간소화할 수 있습니다. 먼저 GridView.builder를 위해서는 ListView.builder와 동일하게 배열을 사용하기 때문에 여기서도 미리 선언하겠습니다. 위에 선언한 것처럼 postList를 만들어주었습니다. GridView.builde..

안녕하세요~ totally 개발자입니다. GridView 오늘 살펴볼 부분은 GridView입니다. 지난 시간에는 ListView에 관해서 살펴 보았는데, ListView와 비슷하지만 2차원 배열 형태로 보여주는 위젯입니다. GridView에는 몇 가지 알고 적용해야 할 속성이 있는데 그 중 하나가 gridDelegate입니다. gridDelegate는 GridView의 children 위젯들의 레이아웃을 조정하는 역할을 하며 여기에서는 SilverGridDelegateWithFixedCrossAxisCount를 활용하여 crossAxisCount (가로축 카운트) 2개, crossAxisSpacing(가로축 사이 간격) 15.0, mainAxisSpacing (세로축 사이 간격)을 12.0로 설정하였습..

안녕하세요~ totally 개발자입니다. ListView.builder 이번 시간에는 저번 시간에 다루었던 ListView를 builder를 활용하여 더 효율적으로 만드는 방법을 살펴보도록 하겠습니다. 먼저 앞서 살펴보았던 ListView의 형태입니다. 34번째부터 36번째 줄에 postContainer가 중복되고 있는 것을 확인하실 수 있고, 이것이 3개 정도면 이렇게 진행해도 무방하겠으나 훨씬 더 많은 데이터가 들어가야 하는 상황이라면 이것은 분명 비효율적입니다. 이 한계점을 극복하기 위해서 사용하는 것이 ListView.builder입니다. 위의 화면을 보시면 31번째부터 36번째 줄이 ListView.builder 부분인데 사용하는 방법이 매우 간단합니다. 기본적으로 itemCount와 itemB..

안녕하세요~ totally 개발자입니다. ListView 오늘 다뤄볼 위젯은 ListView(리스트뷰)입니다. 이 ListView를 사용하면 가로 방향 혹은 세로 방향으로 여러 위젯들을 배치할 수 있습니다. 플러터에서 이 ListView는 GridView와 더불어서 많은 위젯들을 표시할 때 거의 필수적으로 사용되는 위젯이어서 반드시 알고 계셔야 합니다. 앞선 강의해서 보셨다시피 저희는 이미 Drawer 위젯에서 ListView 위젯으로 메뉴를 표시했습니다. 이것을 Scaffold 위젯의 child 즉 메인 부분에 배치하여 적용해보도록 하겠습니다. 보통 페이스북, 인스타그램 등 보시면 스크롤을 하여 포스트를 확인하는 것처럼 이번 시간에는 비슷하게 응용해 보겠습니다. 이제 여러 위젯이 중첩되어 살짝 복잡해지..

안녕하세요~ totally 개발자입니다. GestureDetector 오늘 다뤄볼 내용은 GestureDetector 위젯입니다. 용어 그대로 제스쳐를 감지하는 기능을 가진 위젯이며 사용자의 제스쳐를 인식하기 위해 사용합니다. 이 GestureDetector를 사용할 때에는 인식하려는 범위에 따라 넣어주는 위치가 다르기 때문에 이 부분 주의하셔서 사용하시면 됩니다. 많이 사용하는 제스쳐 속성으로는 onTap이며 나머지 필요한 속성들은 여기에서 참고하시면 됩니다. 이 GestureDetector 위젯을 사용하여 버튼을 눌렀을 때, 밝은 배경을 어두운 배경으로, 어두운 배경을 밝은 배경으로 전환하는 기능을 만들어보도록 하겠습니다. 먼저 9번째 줄의 bool isLightTheme = true; 이렇게 boo..

안녕하세요~ totally 개발자입니다. Stack Widget 오늘 배울 부분은 바로 Stack입니다. Stack Widget은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯으로 주어진 공간에 다양한 컴포넌트들을 중첩할 때 사용합니다. 먼저 기본적인 Stack의 사용법은 Stack안에는 여러가지 component들을 넣을 수 있기 때문에 배열 형태의 [] 대괄호를 넣어주시면 됩니다. 위 이미지를 보면, 34번째 줄에 height 속성을 부여하고, 36번째 줄에 alignment 속성을 이용하여 가운데 배치한 모습입니다. 이렇게 Stack은 기본적으로 정렬 속성도 제공하여 개발자가 원하는 위치로 간단히 정렬을 할 수 있습니다. Stack의 응용을 쉽게 표현하기 위해, 4개의 Contai..