쥐수의 공부노트

앞서 배워본 ListView와 GridView는 스크롤 기능을 자동으로 추가해준다.하지만 이 두가지 위젯을 사용하지 않고 출력 범위를 초과하여 사용하게 되면 오류가 발생하게 되는데, 이때 스크롤 기능을 추가하여 에러 발생을 막을 수 있다.바로 SingleChildScrollView이다.해당 기능을 사용하게 되면 출력 범위가 초과하게 되더라도 오류가 발생하지 않고 스크롤을 통해 확인이 가능하다. body: SingleChildScrollView( child: Column( children: [ Container( width: MediaQuery.of(context).size.width, height: 300, ..

GridView도 ListView에서 builder를 사용하여 효율적으로 코드를 구성하는 것처럼 GridView도 builder를 이용하여 효율적으로 구성 가능하다.ListView.builder에서 진행했던 대로 JSON 형식으로 만들고 builder를 적용한다. final postList = [ { "number" : "0", "color" : Colors.amber, }, { "number" : "1", "color" : Colors.black, }, { "number" : "2", "color" : Colors.blue, }, { "number" : "3", "color" : Colors.p..

GridView는 ListView와 비슷하지만 2차원 배열 형태로 보여주는 위젯이다.GridView에서 몇가지 알고 적용해야 하는 속성이 있는데 그 중 하나가 gridDelegate다.girdDelegatesms GridView의 children 위젯들의 레이아웃을 조정하는 역할을 하며 ,여기에서는 SilverGridDelegateWithFixedCrossAxisCount를 활용하여 crossAxisCount (가로축 카운트), crossAxisSpacing(가로축 사이 간격), mainAxisSpacing(세로축 사이 간격)을 설정하였다. body: GridView( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( ..

ListView.builder를 사용한다.이전 글의 ListView는 코드적으로 문제는 없지만, 많은 양의 데이터를 가지고 오게 된다면코드를 알아보기 굉장히 어려워지므로, 해결한 방법이 바로 ListView.builder이다.ListView.builder는 기본적으로 itemCount와 itemBuilder 속성이 필요하다.itemCount는 몇 개의 아이템을 표시할건지, itemBuilder는 위젯을 지정해서 카운트대로 빌드해주는 역할을 하게 된다.JSON 형태로 되어있는 데이터가 있다고 하자.final postList = [ { "title" : "Sample Title 1", "color" : Colors.green, }, { "title" : "Sampl..

ListView를 사용하면 가로 방향 혹은 세로 방향으로 여러 위젯들을 배치할 수 있다.플러터에서 ListView는 GridView와 더불어서 많은 위젯들을 표시할 때 거의 필수적으로 사용되는 위젯이므로 반드시 이해해야 한다.ListView를 생성하는 4가지 옵션1. 일반적인 ListView를 명시적으로 호출하고 children를 전달하는 방법 => 적은 데이터에 사용시 용이하다.2. ListView.builder 를 사용하여 동적으로 호출하는 방법 => 많은 양의 데이터 리스트에 용이하고, index도 사용 가능하다.3. ListView.separated는 2번에 구분선 사용이 가능하다.4. ListView.custom 사용  해당 코드는 전체 코드가 아닙니다!body: ListView( ..

GestureDetector 위젯은 제스쳐를 감지하는 기능을 가진 위젯이며, 사용자의 제스쳐를 인식하기 위해 사용인식하려는 범위에 따라 넣어주는 위치가 다르기 때문에 주의해서 사용해야한다.많이 사용하는 속성은 onTap이다.밑의 코드 예제에서는 인식 범위를 Tap하게 되면 print가 되는 코드다. 코드 예제는 기능을 사용하는 코드만 가져온 겁니다! body: Center( child: GestureDetector( onTap: () => print("GestuerDetector used."), child: Container( width: 200, height: 200, color..

Stack 위젯은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯기본 형태는 Stack[] 이다.해당 실습에서는 여러 Component를 넣고, 각 Component에 margin를 다르게 주어 일부만 겹치게 표현했다.밑의 코드 예제에서는 Stack()에 children을 넣어 [] 배열한다. 해당 코드는 전체적인 코드가 아니니 주의할 것 ( 이해를 돕기 위해 잘라온 것 ) child: Stack( children: [ Container( width: 200, height: 200, color: Colors.blue, ), Container( ..

Container 위젯Container 위젯은 HTML의 div 태그 용도처럼 광범위하게 쓰인다.속성은 margin, border, padding, child(content) 등을 가진다.Row 위젯Row 위젯은 한 행에 여러가지 열의 위젯들을 배치할 때 사용한다.children 속성에 배열 형태로 위젯들을 지정 가능여러가지 속성 중 많이 쓰이는 것으로는 mainAxisAlignment이다.row 메인축의 정렬을 지정할 수 있어서, start(시작 정렬), end(끝 정렬), spaceAround(맨앞과 맨뒤를 포함하여 동일한 공간을 주는 정렬),spaceBetween(요소 사이에만 동일한 공간을 주는 정렬),spaceEvenly(모든 부분에 동일한 공간을 주는 정렬)등이 있다.Column 위젯Row 위..