쥐수의 공부노트

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 위..

기본적인 앱에서 디자인적인 뼈대를 구성하는 위젯이 바로 Scaffold이다.기본적인 material design의 시각적인 레이아웃 구조를 실행한다. material design은 구글에서 자주쓰는 디자인 양식이나 아이콘을 칭한다.MaterialApp 위젯과 Scaffold 위젯에 대해 알아두는 편이 좋다.MaterialApp은 앱으로써 기능을 할 수 있도록 해주는 뼈대.Scaffold는 구성된 앱에서 디자인적인 부분에서의 뼈대. class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( ..