【Flutter】リストを選択した月毎に表示する機能を実装したい

前提

制作しているアプリ内にToDoリスト機能があり、
自分が過去に登録したタスクを選択した年月毎の一覧で
見返せるようなデザインにしたいです。

画像のような、カレンダーによくある年月選択を
リストの上に実装したいのですが、可能でしょうか。

書籍やネット上の記事で調べましたが、
年月選択単体での実装方法は見つからず質問いたしました。

稚拙な質問で申し訳ございませんが、ご回答お待ちしています。

イメージ説明

実現したいこと

・カレンダー上部の年月選択のみをリストの上に実装したい。

回答1件

ベストアンサー

https://pub.dev/packages/month_picker_dialog_2/example
見た目にそこまで拘らないなら上記などいくつもパッケージがあるので良いものを探して使うのが速いと思われます。もちろんそのパッケージに何かあったら代わりを探すか自分で何とかするかということになりますが。

自分で作りたいならList<DateTime>とカウンターの組み合わせでできるでしょうからまずはそれらを勉強されてはいかがでしょう。
よければ参考にされてください。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: YearAndMonthSelectionUI(

        ),
      ),
    );
  }
}

class YearAndMonthSelectionUI extends StatefulWidget {
  const YearAndMonthSelectionUI({Key? key}) : super(key: key);

  @override
  State<YearAndMonthSelectionUI> createState() =>
      _YearAndMonthSelectionUIState();
}

class _YearAndMonthSelectionUIState extends State<YearAndMonthSelectionUI> {
  int index = 0;

  String get formattedDateTime {
    return '${months[index].year}年 ${months[index].month}月';
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          icon: Icon(Icons.keyboard_double_arrow_left),
          onPressed: () {
            setState(() {
              if (index > 11) {
                index=index-12;
              }
            });
          },
        ),
        //////////////////////////////////////
        IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            setState(() {
              if (index > 0) {
                index--;
              }
            });
          },
        ),
        //////////////////////////////////////
        Text(formattedDateTime),
        //////////////////////////////////////
        IconButton(
          icon: Icon(Icons.arrow_forward_ios),
          onPressed: () {
            setState(() {
              if (index < months.length - 1) {
                index++;
              }
            });
          },
        ),
//////////////////////////////////////
        IconButton(
          icon: Icon(Icons.keyboard_double_arrow_right),
          onPressed: () {
            setState(() {
              if (index < months.length-12) {
                index=index+12;
              }
            });
          },
        ),

      ],
    );
  }
}

final List<DateTime> months = [
  for(int y=2020;y<2025;y++)
    for(int m=1;m<13;m++)
      DateTime(y,m),
];