[Flutter]カレンダーに背景画像を設定する方法

どうも、ちょげ(@chogetarou)です。

SfCalendarで表示するカレンダーに、背景画像を設定する方法を紹介します。

方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("asset/images/dog-photo.jpg"),
              fit: BoxFit.fill)),
      child: SfCalendar(
        view: CalendarView.month,
        backgroundColor: Colors.transparent,
      ),
    ));
  }

まず、「Containerウェジェット」の「decoration引数」に、「image引数」で画像を設定した「BoxDecorationクラス」を渡します。

Container (
    decoration : BoxDecoration(
          image : AssetImage("asset/images/dog-photo.jpg")
    )
)

「image引数」に指定する画像は、皆さんが使用するものに置き換えてください。

そして、「Containerウェジェット」の「child引数」に、「SfCalendarウェジェット」を指定します。

Container (
    decoration : BoxDecoration(
          image : AssetImage("asset/images/dog-photo.jpg")
    ),
　　　child : SfCalendar(
　　　　　　　view : CalendarView.month
　　　),
)

ここまででは、画像が表示されません。

最後に、SfCalendarウェジェットの「backgroundColor引数」に、「Colors.transparent」を指定します。

SfCalendar(
    view: CalendarView.month,
    backgroundColor : Colors.transparent
)

これで、カレンダーに背景画像が表示されます。

Add an image as background in the Flutter Calendar | Sycfusion

This knowledge base article has a content that explains on how to add an image as background in the Flutter Calendar.

support.syncfusion.com