🫠
Flutter:1週間分の日付をAppBarに並べる
目標
今日から1週間分の日付を取り出し、表示させる
今回使うファイル
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をインストールする必要があるみたいです。以下を参考にしました。
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:
//ここに今日の日付から1週間分の日付の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,
),
),
);
}
Discussion