🫠

Flutter：１週間分の日付をAppBarに並べる

2024/05/02に公開

Flutter

datetime

appbar

tech

目標

今日から１週間分の日付を取り出し、表示させる

今回使うファイル

date.dart

日付を表示させるときのデザインを決める
DateのFormatを決める
main.dartのTapBarのtabsリストのindexを元に日付を定義する

main.dart

AppBar Widgetの設定
tabsの中で、Date widgetにindexプロパティ（= dateFromNow）を送る

1.intl packageをインストール

DateFormatのmethodを使うためには、intlのpackageをインストールする必要があるみたいです。以下を参考にしました。
https://pub.dev/packages/intl
https://pub.dev/packages/intl/install

2. 日付を表示するデザインを定義する

//date.dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class Date extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        color: Colors.black,
      ),
      width: 40,
      height: 20,
      alignment: Alignment.center,
      child: Text(
        //ここの日付を定義していく
        '5/1'
        style: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w800,
          fontSize: 9,
        ),
      ),
    );
  }
}

イメージ

3. AppBarをmain.dartで設定

//main.dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),

      home: DefaultTabController(
        length: 7,

        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs:
            //ここに今日の日付から１週間分の日付のDate widgetを入れる
          ),

          body: TabBarView(
            children: ["page1", "page2", "page3", "page4", "page5", "page6", "page7"],
            )
        ),
      )
      
    );
  }
}

4. 日付のformatを設定していく

//date.dart
String get formattedDate {
    DateTime today = DateTime.now();

    //dateは、今日から何日目か足した日付になる。
    //dateFromNowの値が変わる。
    DateTime date = today.add(Duration(days: dateFromNow));
    DateFormat dateFormat = DateFormat('M/d');
    return dateFormat.format(date);
  }

Dartのgetを使用して、正しいformatに成型された日付にします。
Dartのgetは、引数を必要としないメソッドで、でもプロパティのようにアクセスできるという扱いができるそう。つまり今回、日付のformatを変形させるメソッドという風に考えても良いかもしれません。

5. dateFromNowのプロパティをmain.dartから渡す

//date.dart
//dateFromNowが整数型であることを定義します。
final int dateFromNow;

//DateのWidgetには、dateFromNowというプロパティが必要であることを指定します
const Date({required this.dateFromNow});

//main.dart
 bottom: TabBar(
    tabs:
    List.generate(
    7,
    (index) => Date(dateFromNow: index),
    ),
),

tabsの中でList.generateを使用し、リストを形成します。繰り返しの中のindexをdateFromNowとしてDate Widgetに渡すことで、Date widget内で7日分の日付を取得する事ができます。

6.日付を表示させる

初めにdate.dartで表示のデザインを作成しました。そこに実際に値を入れていきます。

//date.dart
@override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        color: Colors.black,
      ),
      width: 40,
      height: 20,
      alignment: Alignment.center,
      child: Text(
        //ここにDartのgetで定義してformattedDateを表示させる。
        //このDate Widgetは、main.dartのAppBarのtabsの中で繰り返される
        formattedDate,
        style: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w800,
          fontSize: 9,
        ),
      ),
    );
  }