add switching appearance mode on record page

lib/components/molecules/select_circle.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+class SelectCircle extends StatelessWidget {
+  final bool isSelected;
+
+  const SelectCircle({Key? key, required this.isSelected}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        SizedBox(
+            width: 20,
+            height: 20,
+            child: SvgPicture.asset("images/circle.line.svg")),
+        if (isSelected)
+          Positioned(
+              top: 5,
+              left: 5,
+              width: 10,
+              height: 10,
+              child: SvgPicture.asset("images/circle.fill.svg")),
+      ],
+    );
+  }
+}

lib/domain/record/components/header/record_page_header.dart

@@ -7,6 +7,7 @@ import 'package:pilll/domain/record/components/header/today_taken_pill_number.da
 import 'package:pilll/domain/record/record_page_store.dart';
 import 'package:pilll/domain/settings/today_pill_number/setting_today_pill_number_page.dart';
 import 'package:pilll/entity/pill_sheet_group.dart';
+import 'package:pilll/entity/setting.dart';
 import 'package:pilll/util/formatter/date_time_formatter.dart';
 import 'package:flutter/material.dart';
 
@@ -17,11 +18,13 @@ abstract class RecordPageInformationHeaderConst {
 class RecordPageInformationHeader extends StatelessWidget {
   final DateTime today;
   final PillSheetGroup? pillSheetGroup;
+  final Setting setting;
   final RecordPageStore store;
   const RecordPageInformationHeader({
     Key? key,
     required this.today,
     required this.pillSheetGroup,
+    required this.setting,
     required this.store,
   }) : super(key: key);
 
@@ -32,6 +35,7 @@ class RecordPageInformationHeader extends StatelessWidget {
   Widget build(BuildContext context) {
     final pillSheetGroup = this.pillSheetGroup;
     final activedPillSheet = pillSheetGroup?.activedPillSheet;
+    final setting = this.setting;
 
     return Container(
       height: RecordPageInformationHeaderConst.height,
@@ -53,6 +57,7 @@ class RecordPageInformationHeader extends StatelessWidget {
               SizedBox(width: 28),
               TodayTakenPillNumber(
                   pillSheetGroup: pillSheetGroup,
+                  setting: setting,
                   onPressed: () {
                     analytics.logEvent(
                         name: "tapped_record_information_header");

lib/domain/record/components/header/today_taken_pill_number.dart

@@ -5,27 +5,39 @@ import 'package:pilll/components/atoms/text_color.dart';
 import 'package:pilll/entity/pill_sheet_group.dart';
 import 'package:pilll/entity/pill_sheet_type.dart';
 import 'package:flutter/material.dart';
+import 'package:pilll/entity/setting.dart';
 
 class TodayTakenPillNumber extends StatelessWidget {
   final PillSheetGroup? pillSheetGroup;
   final VoidCallback onPressed;
+  final Setting setting;
 
   const TodayTakenPillNumber({
     Key? key,
     required this.pillSheetGroup,
     required this.onPressed,
+    required this.setting,
   }) : super(key: key);
 
+  PillSheetAppearanceMode get _appearanceMode =>
+      setting.pillSheetAppearanceMode;
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
-          Text(
-            "💊 今日飲むピル",
-            style: FontType.assisting.merge(TextColorStyle.noshime),
-          ),
+          if (_appearanceMode == PillSheetAppearanceMode.sequential)
+            Text(
+              "💊 今日は服用",
+              style: FontType.assisting.merge(TextColorStyle.noshime),
+            ),
+          if (_appearanceMode != PillSheetAppearanceMode.sequential)
+            Text(
+              "💊 今日飲むピル",
+              style: FontType.assisting.merge(TextColorStyle.noshime),
+            ),
           _content(),
         ],
       ),
@@ -64,7 +76,12 @@ class TodayTakenPillNumber extends StatelessWidget {
       children: <Widget>[
         Text("${activedPillSheet.todayPillNumber}",
             style: FontType.xHugeNumber.merge(TextColorStyle.main)),
-        Text("番", style: FontType.assistingBold.merge(TextColorStyle.noshime)),
+        if (_appearanceMode == PillSheetAppearanceMode.sequential)
+          Text("日目",
+              style: FontType.assistingBold.merge(TextColorStyle.noshime)),
+        if (_appearanceMode != PillSheetAppearanceMode.sequential)
+          Text("番",
+              style: FontType.assistingBold.merge(TextColorStyle.noshime)),
       ],
     );
   }

lib/domain/record/components/pill_sheet/components/pill_number.dart

@@ -4,13 +4,31 @@ import 'package:pilll/components/atoms/font.dart';
 import 'package:pilll/util/formatter/date_time_formatter.dart';
 
 class PlainPillNumber extends StatelessWidget {
-  final int pillNumber;
+  final int pillNumberIntoPillSheet;
 
-  const PlainPillNumber({Key? key, required this.pillNumber}) : super(key: key);
+  const PlainPillNumber({Key? key, required this.pillNumberIntoPillSheet})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "$pillNumberIntoPillSheet",
+      style: FontType.smallTitle.merge(TextStyle(color: PilllColors.weekday)),
+      textScaleFactor: 1,
+    );
+  }
+}
+
+class SequentialPillNumber extends StatelessWidget {
+  final int offset;
+  final int pillNumberIntoPillSheet;
+
+  const SequentialPillNumber(
+      {Key? key, required this.offset, required this.pillNumberIntoPillSheet})
+      : super(key: key);
   @override
   Widget build(BuildContext context) {
     return Text(
-      "$pillNumber",
+      "${offset + pillNumberIntoPillSheet}",
       style: FontType.smallTitle.merge(TextStyle(color: PilllColors.weekday)),
       textScaleFactor: 1,
     );
@@ -32,14 +50,32 @@ class PlainPillDate extends StatelessWidget {
 }
 
 class MenstruationPillNumber extends StatelessWidget {
-  final int pillNumber;
+  final int pillNumberIntoPillSheet;
+
+  const MenstruationPillNumber(
+      {Key? key, required this.pillNumberIntoPillSheet})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "$pillNumberIntoPillSheet",
+      style: FontType.smallTitle.merge(TextStyle(color: PilllColors.primary)),
+      textScaleFactor: 1,
+    );
+  }
+}
+
+class MenstruationSequentialPillNumber extends StatelessWidget {
+  final int offset;
+  final int pillNumberIntoPillSheet;
 
-  const MenstruationPillNumber({Key? key, required this.pillNumber})
+  const MenstruationSequentialPillNumber(
+      {Key? key, required this.offset, required this.pillNumberIntoPillSheet})
       : super(key: key);
   @override
   Widget build(BuildContext context) {
     return Text(
-      "$pillNumber",
+      "${offset + pillNumberIntoPillSheet}",
       style: FontType.smallTitle.merge(TextStyle(color: PilllColors.primary)),
       textScaleFactor: 1,
     );

lib/domain/record/components/pill_sheet/record_page_pill_sheet.dart

@@ -79,9 +79,11 @@ class RecordPagePillSheet extends StatelessWidget {
       return Container(
         width: PillSheetViewLayout.componentWidth,
         child: PillMarkWithNumberLayout(
-          textOfPillNumber: _textOfPillNumber(
+          textOfPillNumber: textOfPillNumber(
             state: state,
             pillSheetGroup: pillSheetGroup,
+            pillSheet: pillSheet,
+            setting: setting,
             pillNumberIntoPillSheet: pillNumberIntoPillSheet,
             pageIndex: pageIndex,
           ),
@@ -119,53 +121,71 @@ class RecordPagePillSheet extends StatelessWidget {
     });
   }
 
-  Widget _textOfPillNumber({
+  static Widget textOfPillNumber({
     required RecordPageState state,
     required PillSheetGroup pillSheetGroup,
+    required PillSheet pillSheet,
     required int pillNumberIntoPillSheet,
     required int pageIndex,
+    required Setting setting,
   }) {
-    final DateTime date =
-        calculatedDateOfAppearancePill(pillSheet, pillNumberIntoPillSheet);
-    final isDateMode = () {
-      if (!(state.isPremium || state.isTrial)) {
-        return false;
-      }
-      if (state.appearanceMode != PillSheetAppearanceMode.date) {
-        return false;
-      }
-      return true;
-    }();
-
-    if (setting.pillNumberForFromMenstruation == 0 ||
-        setting.durationMenstruation == 0) {
-      if (isDateMode) {
-        return PlainPillDate(date: date);
-      } else {
-        return PlainPillNumber(pillNumber: pillNumberIntoPillSheet);
-      }
-    }
-
+    final isPremiumOrTrial = state.isPremium || state.isTrial;
     final containedMenstruationDuration =
         RecordPagePillSheet.isContainedMenstruationDuration(
       pillNumberIntoPillSheet: pillNumberIntoPillSheet,
       pillSheetGroup: pillSheetGroup,
       setting: setting,
       pageIndex: pageIndex,
     );
+    if (isPremiumOrTrial &&
+        state.appearanceMode == PillSheetAppearanceMode.date) {
+      final DateTime date =
+          calculatedDateOfAppearancePill(pillSheet, pillNumberIntoPillSheet);
+
+      if (setting.pillNumberForFromMenstruation == 0 ||
+          setting.durationMenstruation == 0) {
+        return PlainPillDate(date: date);
+      }
 
-    if (isDateMode) {
-      if (containedMenstruationDuration && (state.isPremium || state.isTrial)) {
+      if (containedMenstruationDuration) {
         return MenstruationPillDate(date: date);
       } else {
         return PlainPillDate(date: date);
       }
+    } else if (state.appearanceMode == PillSheetAppearanceMode.sequential) {
+      final offset = summarizedPillSheetTypeTotalCountToPageIndex(
+        pillSheetTypes:
+            pillSheetGroup.pillSheets.map((e) => e.pillSheetType).toList(),
+        pageIndex: pageIndex,
+      );
+      if (setting.pillNumberForFromMenstruation == 0 ||
+          setting.durationMenstruation == 0) {
+        return SequentialPillNumber(
+            offset: offset, pillNumberIntoPillSheet: pillNumberIntoPillSheet);
+      }
+
+      if (isPremiumOrTrial) {
+        if (containedMenstruationDuration) {
+          return MenstruationSequentialPillNumber(
+              offset: offset, pillNumberIntoPillSheet: pillNumberIntoPillSheet);
+        }
+      }
+      return SequentialPillNumber(
+          offset: offset, pillNumberIntoPillSheet: pillNumberIntoPillSheet);
     } else {
-      if (containedMenstruationDuration && (state.isPremium || state.isTrial)) {
-        return MenstruationPillNumber(pillNumber: pillNumberIntoPillSheet);
-      } else {
-        return PlainPillNumber(pillNumber: pillNumberIntoPillSheet);
+      if (setting.pillNumberForFromMenstruation == 0 ||
+          setting.durationMenstruation == 0) {
+        return PlainPillNumber(
+            pillNumberIntoPillSheet: pillNumberIntoPillSheet);
       }
+
+      if (isPremiumOrTrial) {
+        if (containedMenstruationDuration) {
+          return MenstruationPillNumber(
+              pillNumberIntoPillSheet: pillNumberIntoPillSheet);
+        }
+      }
+      return PlainPillNumber(pillNumberIntoPillSheet: pillNumberIntoPillSheet);
     }
   }
 
@@ -202,7 +222,6 @@ class RecordPagePillSheet extends StatelessWidget {
       return left <= pillNumberIntoPillSheet &&
           pillNumberIntoPillSheet <= right;
     }
-
     final pillSheetTypes =
         pillSheetGroup.pillSheets.map((e) => e.pillSheetType).toList();
     final passedCount = summarizedPillSheetTypeTotalCountToPageIndex(