【Flutter】table_calendarの大きさ（長さ）を変更する方法

3684 ワード
Flutter Dart table_calendar Dart テキストリンク

はじめに

Flutterのパッケージでtable_calendarというものを最近使ってアプリ開発をしているのですが、見た目のカスタマイズが複雑でやりにくい上に日本語の記事が少ないようなので、自分が実装するついでにやり方をまとめてみます。

実装前の画面と実装後の画面


実装前の画面です。
table_calendarはデフォルトではカレンダー事態の大きさは画面の半分くらいの大きさなんですが、
今日はカレンダーの大きさを少し長くしてみます。

実装後
このようにカレンダーの部分の長さを変えることができました。
それではやっていきましょう！

ステップ１

まずはコード内のTableCalendar()の中でshouldFillViewportというプロパティを指定してあげる必要があります。
これはカレンダーの大きさを変えれるようにするものだと思って大丈夫です。
これが無いと大きさを指定してもカレンダーの自体の大きさは変わりません。

calendar.dart
TableCalendar(
   shouldFillViewport: true,
),

ステップ２

あとはお馴染みのサイズを変えるときに使うSizedBox()を使って高さを指定して大きさを変えていきます。

calendar.dart
SizedBox(
  height: 450.0,
  child: TableCalendar(
    shouldFillViewport: true,
  ),
),

これで完成です！

他の例

SizedBox()を使う以外にもカレンダーの大きさを変える方法はあって使えそうなもので言うと、
Expanded()というものがあります。
これはRow()やColumn()などの空いたスペースをレスポンシブに埋めることができるというものです。
あまり馴染みがない方はいい感じに空いてるスペースに埋め込めると思えばいいと思います。

calendar.dart
Column(
  children: [
    Expanded(
      flex: 7,
      child: TableCalendar(
        shouldFillViewport: true,
      ),
    ),
  ],
),

具体的にはこのような使い方をします。
Expanded()が持っているflexプロパティを使うことで、
Column()やRow()に対する大きさを比率で指定することができます。
上のコードだとColumn()の７割のスペースで表示させるという感じです。

最後に

shouldFillViewportを指定してあげると簡単に大きさを変えることができました。

参考にさせていただいたサイトはこちら　↓ ↓
https://stackoverflow.com/questions/67763057/how-to-resize-a-flutter-table-calendar