이 기사를 읽고 습득할 수 있는 것

Flutter에서 GridView를 사용하여 요소를 이런 식으로 옆에 늘어놓을 수 있게 된다

결론

이런 식으로 쓰기

main.dart

...略

            child: GridView.count(
              padding: EdgeInsets.all(10), // 割と重要！ここでGridViewの位置を調整する
              crossAxisCount: 4, // 一列に要素をいくつまで置けるかを指定
              children: List.generate(
                4, // 要素をいくつ並べるか
                (index) {
                  return Container( 
                    margin: EdgeInsets.all(10), // 要素間の幅を作る
                    child: RaisedButton( // childは今回はRaisedButtonを使用
                      onPressed: () {
                        print("tap");
                      },
                      color: Colors.grey,
                      child: Text(index.toString(), style: TextStyle(fontSize: 16)),
                    ),
                  );
                },
              ),
            ),

포인트

· GridView.count 바로 아래에 padding　→기본값이 크게 설정되어 있으므로 대부분의 경우에 다시 설정해야 한다고 생각한다

· crossAxisCount 로 열당 요소 수 결정
　→고정치로 좋다고 생각한다

· List.generate 내의 모든 요소 수 지정
　→여기에서는 고정값을 넣었지만, 실제로는 배열의 요소수(이런 느낌→ array.length )를 넣도록 할 것

요소 사이의 공간은 어떻게 열 수 있습니까?

이번에는 margin: EdgeInsets.all(10) 에서 열었지만,
공식에서는 GridView하에서 crossAxisSpacing: 10 같은 방법이 있었으므로,
아마 이쪽이 좋다고 생각한다.

공식을 보고 싶은 분은 이쪽

요소수가 무한한 경우의 케이스는 이쪽으로부터.
요소 사이의 공간을 여는 방법도 여러 가지 있는 것 같고, 자세한 것은 이쪽으로부터!

출처