안녕하세요~ 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..

안녕하세요~ Totally 개발자입니다. 이번 시간에는 Container, Row, Column에 관련하여 설명하고자 합니다. Container 위젯 먼저 Container widget은 HTML의 div 태그 용도처럼 광범위하게 쓰이며 margin, border, padding, child(content)의 속성을 가집니다. 아래처럼 width, height, color 등의 속성도 제공하여 스타일 및 크기 등을 지정할 수 있으며 child 속성에 Text 등의 다양한 위젯을 추가할 수 있습니다. Row 위젯 Row 위젯은 한 행에 여러가지 열의 위젯들을 배치할 때 사용하며 children속성에 배열 형태로 위젯들을 지정할 수 있습니다. Row 위젯은 여러가지 속성들을 제공하고 있는데, 그 중 많이 쓰..