2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-03-22

はじめに

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

告知

この記事に書いてあるtable_calendarを使用している、
タスクカレンダーというアプリをリリースしました!
(まだ改善の余地がたくさんありますが、、)

コンセプトは、めちゃめちゃ手軽なカレンダー兼タスク管理アプリです。
普段は、めんどくさくてカレンダーアプリを使わないが、たまにある美容室の予定は忘れられない時など、ちょっとしたことを最低限の機能でストレスなく行えます。

table_calendarを使ってこんなアプリができるんだという参考にもなれば幸いです。

ぜひ一度、アプリを手に取ってみてください!!!

ダウンロードは下から可能です。

Google Play で手に入れよう    Download on the App Store

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

qiita記事用.png
実装前の画面です。
table_calendarはデフォルトではカレンダー事態の大きさは画面の半分くらいの大きさなんですが、
今日はカレンダーの大きさを少し長くしてみます。
スクリーンショット 2022-03-23 2.21.31.png
実装後
このようにカレンダーの部分の長さを変えることができました。
それではやっていきましょう!

ステップ1

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

calendar.dart
TableCalendar(
   shouldFillViewport: true,
),

ステップ2

あとはお馴染みのサイズを変えるときに使う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()の7割のスペースで表示させるという感じです。

最後に

shouldFillViewportを指定してあげると簡単に大きさを変えることができました!
もし参考になったらいいねしてくれたら嬉しいです♪

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?