【Flutter】GridView 아래에 버튼 Widget을 배치하는 방법

이번에는 GridView 에서 이미지 아래에 있다는 버튼 Widget 설치 방법에 대해.



위 그림의 오렌지색 RaisedButton 입니다.

GridView 아래에 버튼 Widget 배치

일반적으로 RaisedButton 를 추가하려고 하면 다음 오류가 발생합니다.

The method '>' was called on null

화면 크기가 이상하기 때문에 오류가 발생했지만 자세한 내용은 알 수 없습니다.

방법: Expanded로 래핑

Expanded에서 GridView를 래핑하면 이전 오류가 발생하지 않고 제대로 표시됩니다.

코드 예(GridView)

  Widget get _gridViewSection =>
      Consumer<CheckListProvider>(builder: (context, model, _) {
        return Expanded(   // ★ExpandedでGridViewをラップする。
          child: GridView.builder(
            itemCount: model.checks.length,
            shrinkWrap: true,
            padding: const EdgeInsets.all(4),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemBuilder: (BuildContext context, int index) {
              return _listItem(model, index); // Grid一つ分のデザインを作成(割愛)
            },
          ),
        );
      });

GridView 설명과는 관련이 없지만 Consumer<CheckListProvider>…는 Provider를 사용합니다.
알지 못하는 분은 이쪽.

【Flutter】앱 제작에서 배우는 Provider의 사용법 【도해 첨부】

그리고는, GridView아래에 RaisedButton 를 보통으로 추가하면 OK.
자세한 내용은 생략하지만 _addSection에서 RaisedButton를 만들고 있습니다.

코드 예(body부)

body: Column(
  children: [
    // GridView
    _gridViewSection,
    // 「Add to Todo List」ボタン
    _addSection,
  ],
),

참고

GridView 사용법

Flutter Doc KR GridView
htps : // f ぅ r. ctr의 st. 코 m / 바시 c / 아요 t / g 리 d ぃ 아 w /

오류 해결

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 58559145 / 헷