新增傳訊，修改版面，修改UI動畫

lib/activity.dart

@@ -0,0 +1,227 @@
+import 'package:flutter/material.dart';
+
+class ActivityListPage extends StatefulWidget {
+  const ActivityListPage({Key? key}) : super(key: key);
+
+  @override
+  State<ActivityListPage> createState() => _ActivityListPageState();
+}
+
+class _ActivityListPageState extends State<ActivityListPage> {
+  int? selectedActivityId;
+  int selectedPeopleCount = 1;
+
+  void openRegisterModal(int activityId) {
+    setState(() {
+      selectedActivityId = activityId;
+    });
+    showDialog(
+      context: context,
+      builder:
+          (context) => AlertDialog(
+            title: const Text('確認報名'),
+            content: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Text('選擇報名人數：'),
+                DropdownButton<int>(
+                  value: selectedPeopleCount,
+                  onChanged: (value) {
+                    if (value != null) {
+                      setState(() {
+                        selectedPeopleCount = value;
+                      });
+                    }
+                  },
+                  items:
+                      [1, 2, 3, 4]
+                          .map(
+                            (e) =>
+                                DropdownMenuItem(value: e, child: Text('$e 人')),
+                          )
+                          .toList(),
+                ),
+              ],
+            ),
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.pop(context),
+                child: const Text('取消'),
+              ),
+              ElevatedButton(
+                onPressed: () {
+                  Navigator.pop(context);
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(
+                      content: Text(
+                        '已報名活動 ID $selectedActivityId，人數：$selectedPeopleCount',
+                      ),
+                    ),
+                  );
+                },
+                child: const Text('確認報名'),
+              ),
+            ],
+          ),
+    );
+  }
+
+  Widget activityCard({
+    required String title,
+    required String time,
+    required String location,
+    int? id,
+    bool canRegister = false,
+  }) {
+    return Card(
+      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              title,
+              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 4),
+            Text(time),
+            Text(location),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                TextButton(
+                  onPressed: () {
+                    // TODO: 導向詳情頁
+                  },
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.transparent,
+                    foregroundColor: Colors.black,
+                    shadowColor: Colors.transparent,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(16),
+                      side: const BorderSide(color: Colors.black),
+                    ),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 20,
+                      vertical: 12,
+                    ),
+                  ),
+                  child: const Text('查看詳情'),
+                ),
+                const SizedBox(width: 8),
+                if (canRegister && id != null)
+                  ElevatedButton(
+                    onPressed: () => openRegisterModal(id),
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: Colors.green,
+                      shadowColor: Colors.transparent,
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 20,
+                        vertical: 12,
+                      ),
+                    ),
+                    child: const Text('我要報名'),
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.vertical(top: Radius.circular(24)), // 上方圓角
+      ),
+      child: SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.only(bottom: 20),
+          child: Column(
+            children: [
+              // 顶部滑块
+              const SizedBox(height: 12),
+              Container(
+                width: 40,
+                height: 5,
+                decoration: BoxDecoration(
+                  color: Colors.grey[300],
+                  borderRadius: BorderRadius.circular(10),
+                ),
+              ),
+              const SizedBox(height: 12),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: Row(
+                  children: [
+                    const Text(
+                      '社區活動列表',
+                      style: TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const Spacer(),
+                    IconButton(
+                      icon: const Icon(Icons.close),
+                      onPressed: () => Navigator.pop(context),
+                    ),
+                  ],
+                ),
+              ),
+              Expanded(
+                child: ListView(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        top: 12.0,
+                        right: 16,
+                        left: 16,
+                      ),
+                      child: Align(
+                        alignment: Alignment.centerRight,
+                        child: ElevatedButton.icon(
+                          onPressed: () {
+                            // TODO: 導向提交活動頁
+                          },
+                          icon: const Icon(Icons.add),
+                          label: const Text('提交活動申請'),
+                        ),
+                      ),
+                    ),
+                    activityCard(
+                      title: '🎉 社區春季市集',
+                      time: '時間：2025/04/27（日）10:00 - 16:00',
+                      location: '地點：中庭花園',
+                      id: 1,
+                    ),
+                    activityCard(
+                      title: '🎉 早晨瑜珈課程',
+                      time: '每週六 07:00 - 08:00',
+                      location: '地點：社區多功能教室',
+                      id: 2,
+                      canRegister: true,
+                    ),
+                    activityCard(
+                      title: '🎉 二手書交換日',
+                      time: '2025/05/05（六）13:00 - 17:00',
+                      location: '地點：社區圖書區',
+                      id: 3,
+                      canRegister: true,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/bill.dart

@@ -0,0 +1,178 @@
+import 'package:flutter/material.dart';
+
+class BillItem {
+  final String date;
+  final String title;
+  final int amount;
+  final String dueDate;
+  final String? reminder;
+
+  BillItem({
+    required this.date,
+    required this.title,
+    required this.amount,
+    required this.dueDate,
+    this.reminder,
+  });
+}
+
+class BillPage extends StatelessWidget {
+  final ScrollController scrollController;
+
+  BillPage({super.key, required this.scrollController});
+
+  final List<BillItem> bills = [
+    BillItem(
+      date: '2025/04/22',
+      title: '管理費',
+      amount: 1200,
+      dueDate: '2025/04/30',
+      reminder: '第 2 次催繳',
+    ),
+    BillItem(
+      date: '2025/04/20',
+      title: '水費',
+      amount: 340,
+      dueDate: '2025/04/28',
+    ),
+    BillItem(
+      date: '2025/04/18',
+      title: '停車費',
+      amount: 2000,
+      dueDate: '2025/04/25',
+      reminder: '第 3 次催繳',
+    ),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          decoration: const BoxDecoration(
+            color: Color(0xFF9EAF9F),
+            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+          ),
+          child: Row(
+            children: [
+              IconButton(
+                icon: const Icon(Icons.close, color: Colors.white),
+                onPressed: () => Navigator.pop(context),
+              ),
+              const SizedBox(width: 8),
+              const Text(
+                '繳費通知',
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 20,
+                  color: Colors.white,
+                ),
+              ),
+            ],
+          ),
+        ),
+        Expanded(
+          child: Container(
+            color: const Color(0xFFF7F8FA),
+            padding: const EdgeInsets.all(16),
+            child: Card(
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: ListView(
+                  controller: scrollController,
+                  children: [
+                    const Text(
+                      '💰 繳費項目',
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 12),
+                    ...bills.map((bill) => BillTile(bill: bill)).toList(),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class BillTile extends StatelessWidget {
+  final BillItem bill;
+
+  const BillTile({super.key, required this.bill});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      decoration: const BoxDecoration(
+        border: Border(bottom: BorderSide(color: Color(0xFFDDDDDD))),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                bill.date,
+                style: const TextStyle(fontSize: 14, color: Color(0xFF555555)),
+              ),
+              Text(
+                '${bill.title} - \$${bill.amount}',
+                style: const TextStyle(fontSize: 14, color: Color(0xFF222222)),
+              ),
+            ],
+          ),
+          const SizedBox(height: 4),
+          Text(
+            '繳費截止日：${bill.dueDate}',
+            style: const TextStyle(fontSize: 13, color: Color(0xFF777777)),
+          ),
+          if (bill.reminder != null)
+            Padding(
+              padding: const EdgeInsets.only(top: 4.0),
+              child: Text(
+                bill.reminder!,
+                style: TextStyle(
+                  fontSize: 13,
+                  color: Colors.red[700],
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+// 👇 浮層包裝元件
+class BillPageWrapper extends StatelessWidget {
+  const BillPageWrapper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+      initialChildSize: 0.95,
+      minChildSize: 0.5,
+      maxChildSize: 1.0,
+      expand: false,
+      builder: (_, scrollController) {
+        return Container(
+          color: Colors.transparent,
+          child: BillPage(scrollController: scrollController),
+        );
+      },
+    );
+  }
+}

lib/emergency.dart

@@ -0,0 +1,159 @@
+import 'package:flutter/material.dart';
+
+class EmergencyPage extends StatefulWidget {
+  const EmergencyPage({super.key});
+
+  @override
+  State<EmergencyPage> createState() => _EmergencyPageState();
+}
+
+class _EmergencyPageState extends State<EmergencyPage> {
+  final TextEditingController _descriptionController = TextEditingController();
+  String? _selectedType;
+
+  final List<Map<String, String>> disasterTypes = [
+    {"label": "🔥 火災", "value": "火災"},
+    {"label": "🌏 地震", "value": "地震"},
+    {"label": "💧 水災", "value": "水災"},
+    {"label": "🕵️‍♂️ 可疑人物", "value": "可疑人物"},
+    {"label": "⚠️ 公共設施故障", "value": "公共設施故障"},
+    {"label": "❓ 其他", "value": "其他"},
+  ];
+
+  void _sendAlert() {
+    final type = _selectedType;
+    final desc = _descriptionController.text.trim();
+
+    if (type == null || type.isEmpty) {
+      _showDialog("⚠️ 請先選擇災害類型！");
+      return;
+    }
+
+    if (desc.isEmpty) {
+      _showDialog("⚠️ 請輸入簡易說明！");
+      return;
+    }
+
+    _showDialog("✅ 已通報「$type」\n說明：「$desc」");
+  }
+
+  void _showDialog(String message) {
+    showDialog(
+      context: context,
+      builder:
+          (_) => AlertDialog(
+            content: Text(message),
+            actions: [
+              TextButton(
+                child: const Text('確定'),
+                onPressed: () {
+                  Navigator.pop(context); // 關閉 dialog
+                  Navigator.pop(context); // 關閉 bottomSheet
+                },
+              ),
+            ],
+          ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        bottom: MediaQuery.of(context).viewInsets.bottom,
+      ),
+      child: SingleChildScrollView(
+        child: Container(
+          padding: const EdgeInsets.all(20),
+          decoration: const BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                width: 40,
+                height: 5,
+                margin: const EdgeInsets.only(bottom: 15),
+                decoration: BoxDecoration(
+                  color: Colors.grey[300],
+                  borderRadius: BorderRadius.circular(10),
+                ),
+              ),
+              Image.network(
+                'https://cdn-icons-png.flaticon.com/512/564/564619.png',
+                width: 100,
+              ),
+              const SizedBox(height: 15),
+              const Text('若遇緊急情況，請選擇災害類型後立即通報。'),
+              const SizedBox(height: 20),
+              Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  '災害類型',
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+              const SizedBox(height: 8),
+              DropdownButtonFormField<String>(
+                decoration: const InputDecoration(border: OutlineInputBorder()),
+                value: _selectedType,
+                hint: const Text("請選擇..."),
+                items:
+                    disasterTypes
+                        .map(
+                          (item) => DropdownMenuItem(
+                            value: item['value'],
+                            child: Text(item['label']!),
+                          ),
+                        )
+                        .toList(),
+                onChanged: (value) {
+                  setState(() {
+                    _selectedType = value;
+                  });
+                },
+              ),
+              const SizedBox(height: 20),
+              Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  '簡易說明',
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+              const SizedBox(height: 8),
+              TextField(
+                controller: _descriptionController,
+                maxLines: 3,
+                decoration: const InputDecoration(
+                  hintText: '請輸入簡要說明，例如地點或狀況...',
+                  border: OutlineInputBorder(),
+                ),
+              ),
+              const SizedBox(height: 25),
+              SizedBox(
+                width: double.infinity,
+                child: ElevatedButton.icon(
+                  onPressed: _sendAlert,
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.red,
+                    foregroundColor: Colors.white,
+                    padding: const EdgeInsets.symmetric(vertical: 16),
+                  ),
+                  icon: const Icon(Icons.warning),
+                  label: const Text('立即通報'),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/home_content_page.dart

@@ -1,21 +1,72 @@
+import 'package:communityapp/bill.dart';
+import 'package:communityapp/emergency.dart';
+import 'package:communityapp/package.dart';
+import 'package:communityapp/visitor.dart';
 import 'package:flutter/material.dart';
 import 'reapair.dart';
+import 'activity.dart';
 
 class HomeContentPage extends StatelessWidget {
   const HomeContentPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      child: Column(
-        children: [
-          _announcementSection(),
-          _quickMenuSection(context),
-          _adCarousel(),
-          _marqueeNotice(),
-          _activitySection(),
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('社區通'),
+        actions: [
+          Row(
+            children: [
+              const Text(
+                '林小安 您好',
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(width: 8),
+              Stack(
+                children: [
+                  IconButton(
+                    icon: const Icon(Icons.notifications),
+                    onPressed: () {
+                      // TODO: 跳轉到通知頁
+                    },
+                  ),
+                  Positioned(
+                    right: 8,
+                    top: 8,
+                    child: Container(
+                      padding: const EdgeInsets.all(2),
+                      decoration: BoxDecoration(
+                        color: Colors.red,
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                      constraints: const BoxConstraints(
+                        minWidth: 16,
+                        minHeight: 16,
+                      ),
+                      child: const Text(
+                        '3',
+                        style: TextStyle(color: Colors.white, fontSize: 10),
+                        textAlign: TextAlign.center,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ],
       ),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            _announcementSection(),
+            _quickMenuSection(context),
+            _adCarousel(),
+            _marqueeNotice(),
+            _activitySection(),
+          ],
+        ),
+      ),
     );
   }
 
@@ -61,7 +112,7 @@ class HomeContentPage extends StatelessWidget {
             childAspectRatio: 1,
             children: [
               _buildQuickButton(context, '報修', 'assets/icons/repair.png'),
-              _buildQuickButton(context, '郵件', 'assets/icons/mail.png'),
+              _buildQuickButton(context, '包裹', 'assets/icons/mail.png'),
               _buildQuickButton(context, '訪客', 'assets/icons/visitor.png'),
               _buildQuickButton(context, '繳費', 'assets/icons/payment.png'),
               _buildQuickButton(context, '社區互動', 'assets/icons/community.png'),
@@ -82,9 +133,54 @@ class HomeContentPage extends StatelessWidget {
       onTap: () {
         switch (title) {
           case "報修":
-            Navigator.push(
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => const RepairPageWrapper(),
+            );
+
+          case "包裹":
+            /*Navigator.push(
               context,
-              MaterialPageRoute(builder: (context) => const RepairPage()),
+              MaterialPageRoute(builder: (context) => PackagePage()),
+            );*/
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (context) => PackagePageWrapper(),
+            );
+          case "訪客":
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (context) => VisitorPageWrapper(),
+            );
+
+          case "繳費":
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => BillPageWrapper(),
+            );
+
+          case "社區互動":
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => ActivityListPage(),
+            );
+
+          case "緊急通報":
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => EmergencyPage(),
             );
           default:
         }
@@ -212,11 +308,45 @@ class HomeContentPage extends StatelessWidget {
                   style: const TextStyle(fontSize: 12, color: Colors.black54),
                 ),
                 const SizedBox(height: 8),
-                ElevatedButton(
-                  onPressed: () {
-                    // TODO: 活動詳情
-                  },
-                  child: const Text('查看'),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.start, // 左對齊或你要調整的位置
+                  children: [
+                    ElevatedButton(
+                      onPressed: () {
+                        // TODO: 報名事件
+                      },
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: Colors.green, // 綠色
+                        fixedSize: const Size(75, 30), // 寬高都 60，正方形
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(8), // 0 圓角
+                        ),
+                      ),
+                      child: const Text(
+                        '報名',
+                        softWrap: false,
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                    const SizedBox(width: 10), // 按鈕間隔
+                    ElevatedButton(
+                      onPressed: () {
+                        // TODO: 查看活動
+                      },
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: Colors.blue, // 藍色
+                        fixedSize: const Size(75, 30), // 寬高都 60，正方形
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(8), // 0 圓角
+                        ),
+                      ),
+                      child: const Text(
+                        '查看',
+                        softWrap: false,
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                  ],
                 ),
               ],
             ),

lib/home_page.dart

@@ -24,50 +24,6 @@ class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('社區通'),
-        actions: [
-          Row(
-            children: [
-              const Text(
-                '林小安 您好',
-                style: TextStyle(fontWeight: FontWeight.bold),
-              ),
-              const SizedBox(width: 8),
-              Stack(
-                children: [
-                  IconButton(
-                    icon: const Icon(Icons.notifications),
-                    onPressed: () {
-                      // TODO: 跳轉到通知頁
-                    },
-                  ),
-                  Positioned(
-                    right: 8,
-                    top: 8,
-                    child: Container(
-                      padding: const EdgeInsets.all(2),
-                      decoration: BoxDecoration(
-                        color: Colors.red,
-                        borderRadius: BorderRadius.circular(10),
-                      ),
-                      constraints: const BoxConstraints(
-                        minWidth: 16,
-                        minHeight: 16,
-                      ),
-                      child: const Text(
-                        '3',
-                        style: TextStyle(color: Colors.white, fontSize: 10),
-                        textAlign: TextAlign.center,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ],
-      ),
       body: _pages[_currentIndex],
       bottomNavigationBar: BottomNavigationBar(
         type: BottomNavigationBarType.fixed,

lib/message_page.dart

@@ -1,10 +1,174 @@
 import 'package:flutter/material.dart';
 
-class MessagePage extends StatelessWidget {
+void main() {
+  runApp(const MyApp());
+}
+
+class Message {
+  final String text;
+  final bool isUser;
+  Message(this.text, this.isUser);
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: '訊息中心',
+      theme: ThemeData(primarySwatch: Colors.green),
+      home: const MessagePage(),
+      debugShowCheckedModeBanner: false,
+    );
+  }
+}
+
+class MessagePage extends StatefulWidget {
   const MessagePage({super.key});
+  @override
+  State<MessagePage> createState() => _MessagePageState();
+}
+
+class _MessagePageState extends State<MessagePage> {
+  final List<Message> _messages = [
+    Message('您好，請記得繳交這個月的管理費。', false),
+    Message('好的，謝謝通知！', true),
+    Message('提醒您 4/18 上午社區將進行水塔清洗，會暫停供水。', false),
+    Message('了解！', true),
+  ];
+
+  final TextEditingController _controller = TextEditingController();
+  final ScrollController _scrollController = ScrollController();
+
+  void _sendMessage() {
+    final text = _controller.text.trim();
+    if (text.isEmpty) return;
+    setState(() {
+      _messages.add(Message(text, true));
+    });
+    _controller.clear();
+
+    // 自動滾到底部，延遲讓畫面先更新
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (_scrollController.hasClients) {
+        _scrollController.animateTo(
+          _scrollController.position.maxScrollExtent,
+          duration: const Duration(milliseconds: 300),
+          curve: Curves.easeOut,
+        );
+      }
+    });
+  }
+
+  int _currentIndex = 2; // 預設訊息頁
 
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text('訊息頁內容'));
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('訊息中心'),
+        backgroundColor: const Color(0xFF9eaf9f),
+        foregroundColor: Colors.white,
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () => Navigator.pop(context),
+        ),
+      ),
+      body: Column(
+        children: [
+          Expanded(
+            child: ListView.builder(
+              controller: _scrollController,
+              padding: const EdgeInsets.all(16),
+              itemCount: _messages.length,
+              itemBuilder: (context, index) {
+                final msg = _messages[index];
+                return Align(
+                  alignment:
+                      msg.isUser ? Alignment.centerRight : Alignment.centerLeft,
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 10,
+                      horizontal: 16,
+                    ),
+                    margin: const EdgeInsets.symmetric(vertical: 6),
+                    constraints: const BoxConstraints(maxWidth: 300),
+                    decoration: BoxDecoration(
+                      color:
+                          msg.isUser
+                              ? const Color(0xFFD0E9C6)
+                              : const Color(0xFFE0E0E0),
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                    child: Text(
+                      msg.text,
+                      style: const TextStyle(fontSize: 14, height: 1.5),
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+      bottomNavigationBar: SafeArea(
+        top: false,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // 輸入列
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+              color: Colors.white,
+              child: Row(
+                children: [
+                  IconButton(
+                    icon: const Icon(Icons.image_outlined),
+                    onPressed: () {
+                      // 這裡可加選擇圖片功能
+                    },
+                  ),
+                  Expanded(
+                    child: TextField(
+                      controller: _controller,
+                      decoration: const InputDecoration(
+                        hintText: '輸入訊息...',
+                        contentPadding: EdgeInsets.symmetric(
+                          horizontal: 16,
+                          vertical: 8,
+                        ),
+                        border: OutlineInputBorder(
+                          borderRadius: BorderRadius.all(Radius.circular(20)),
+                        ),
+                      ),
+                      onSubmitted: (_) => _sendMessage(),
+                    ),
+                  ),
+                  const SizedBox(width: 8),
+                  ElevatedButton(
+                    onPressed: _sendMessage,
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: const Color(0xFF4CAF50),
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(20),
+                      ),
+                    ),
+                    child: const Text('發送'),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+      resizeToAvoidBottomInset: true, // 鍵盤彈出時畫面會推上去
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _scrollController.dispose();
+    super.dispose();
   }
 }

lib/package.dart

@@ -0,0 +1,182 @@
+import 'package:flutter/material.dart';
+
+class PackagePage extends StatelessWidget {
+  final ScrollController scrollController;
+
+  const PackagePage({super.key, required this.scrollController});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        // 自訂頂部 Bar
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          decoration: const BoxDecoration(
+            color: Color(0xFF9EAF9F),
+            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+          ),
+          child: Row(
+            children: [
+              IconButton(
+                icon: const Icon(Icons.close, color: Colors.white),
+                onPressed: () => Navigator.pop(context),
+              ),
+              const SizedBox(width: 8),
+              const Text(
+                '信件包裹通知',
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 20,
+                  color: Colors.white,
+                ),
+              ),
+            ],
+          ),
+        ),
+
+        // 可滾動內容
+        Expanded(
+          child: Container(
+            color: const Color(0xFFF7F8FA),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            child: ListView(
+              controller: scrollController,
+              children: [
+                const Text(
+                  '📦 待領包裹',
+                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+                ),
+                const SizedBox(height: 12),
+                _buildParcelItem(
+                  context: context,
+                  date: '2025/04/16',
+                  courier: '宅配 - 7-11 交貨便',
+                  recipient: '林小安',
+                  parcelId: 'P20240416001',
+                  amount: 250,
+                ),
+                _buildParcelItem(
+                  context: context,
+                  date: '2025/04/14',
+                  courier: '黑貓宅急便',
+                  recipient: '林小安',
+                  parcelId: 'P20240414002',
+                  amount: 120,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildParcelItem({
+    required String date,
+    required String courier,
+    required String recipient,
+    required String parcelId,
+    required int amount,
+    required BuildContext context,
+  }) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      margin: const EdgeInsets.only(bottom: 16),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+        boxShadow: [
+          BoxShadow(
+            color: Color(0x11000000),
+            blurRadius: 4,
+            offset: Offset(0, 2),
+          ),
+        ],
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildRow(date, courier),
+            const SizedBox(height: 4),
+            _buildRow('收件人：$recipient', '包裹編號：$parcelId'),
+            const SizedBox(height: 4),
+            _buildRow('代收金額：\$${amount.toString()}', ''),
+            const SizedBox(height: 10),
+            Align(
+              alignment: Alignment.centerRight,
+              child: ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: const Color(0xFF4CAF50),
+                  foregroundColor: Colors.white,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(6),
+                  ),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 16,
+                    vertical: 8,
+                  ),
+                ),
+                onPressed: () {
+                  showDialog(
+                    context: context,
+                    builder:
+                        (ctx) => AlertDialog(
+                          title: const Text('包裹已領取'),
+                          content: const Text('您已確認領取此包裹。'),
+                          actions: [
+                            TextButton(
+                              onPressed: () => Navigator.pop(ctx),
+                              child: const Text('確定'),
+                            ),
+                          ],
+                        ),
+                  );
+                },
+                child: const Text('確認領取', style: TextStyle(fontSize: 13)),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildRow(String left, String right) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          left,
+          style: const TextStyle(fontSize: 14, color: Color(0xFF555555)),
+        ),
+        Text(
+          right,
+          style: const TextStyle(fontSize: 14, color: Color(0xFF555555)),
+        ),
+      ],
+    );
+  }
+}
+
+class PackagePageWrapper extends StatelessWidget {
+  const PackagePageWrapper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+      initialChildSize: 0.95,
+      minChildSize: 0.5,
+      maxChildSize: 1.0,
+      expand: false,
+      builder: (_, scrollController) {
+        return Container(
+          decoration: const BoxDecoration(color: Colors.transparent),
+          child: PackagePage(scrollController: scrollController),
+        );
+      },
+    );
+  }
+}

lib/personal_page.dart

@@ -3,6 +3,9 @@ import 'login_page.dart';
 import 'edit_profile.dart';
 import 'feedback.dart';
 import 'reapair.dart';
+import 'visitor.dart';
+import 'package.dart';
+import 'bill.dart';
 
 class PersonalPage extends StatelessWidget {
   const PersonalPage({super.key});
@@ -193,20 +196,36 @@ class PersonalPage extends StatelessWidget {
         physics: const NeverScrollableScrollPhysics(),
         children: [
           _buildMenuItem('繳費通知', 'receipt.png', () {
-            // TODO: 繳費通知點擊
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => BillPageWrapper(),
+            );
           }),
           _buildMenuItem('報修申請', 'repair.png', () {
-            // TODO: 報修申請點擊
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => const RepairPage()),
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (_) => const RepairPageWrapper(),
             );
           }),
           _buildMenuItem('包裹通知', 'package.png', () {
-            // TODO: 包裹通知點擊
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (context) => PackagePageWrapper(),
+            );
           }),
           _buildMenuItem('訪客', 'visitor.png', () {
-            // TODO: 訪客點擊
+            showModalBottomSheet(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (context) => const VisitorPageWrapper(),
+            );
           }),
         ],
       ),
@@ -289,7 +308,10 @@ class PersonalPage extends StatelessWidget {
           onTap: () {},
           child: Image.asset('assets/icons/logout.png', width: 18, height: 18),
         ),*/
-        label: const Text('登出', style: TextStyle(fontSize: 16)),
+        label: const Text(
+          '登出',
+          style: TextStyle(fontSize: 16, color: Colors.white),
+        ),
       ),
     );
   }

lib/reapair.dart

@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 
 class RepairPage extends StatefulWidget {
-  const RepairPage({super.key});
+  const RepairPage({super.key, required this.scrollController});
+
+  final ScrollController scrollController;
 
   @override
   State<RepairPage> createState() => _RepairPageState();
@@ -51,7 +53,7 @@ class _RepairPageState extends State<RepairPage> {
       ScaffoldMessenger.of(
         context,
       ).showSnackBar(const SnackBar(content: Text('報修已提交！')));
-      // 可擴充送出資料到伺服器
+      // 這裡可以擴充送出資料到伺服器的邏輯
     }
   }
 
@@ -64,120 +66,160 @@ class _RepairPageState extends State<RepairPage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('水電網路報修'),
-        backgroundColor: const Color(0xFF9eaf9f),
-        foregroundColor: Colors.white,
+    return Container(
+      decoration: const BoxDecoration(
+        color: Color(0xFFF7F8FA),
+        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
       ),
-      body: ListView(
-        padding: const EdgeInsets.all(16),
+      child: Column(
         children: [
-          const Text('🛠️ 填寫報修單', style: TextStyle(fontSize: 16)),
-          const SizedBox(height: 12),
-          Form(
-            key: _formKey,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
+          // 標題列
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            decoration: const BoxDecoration(
+              color: Color(0xFF9EAF9F),
+              borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+            ),
+            child: Row(
               children: [
+                IconButton(
+                  icon: const Icon(Icons.close, color: Colors.white),
+                  onPressed: () => Navigator.pop(context),
+                ),
+                const SizedBox(width: 8),
                 const Text(
-                  '報修類別',
-                  style: TextStyle(fontWeight: FontWeight.bold),
-                ),
-                DropdownButtonFormField<String>(
-                  value: _repairType,
-                  items: const [
-                    DropdownMenuItem(value: '電力問題', child: Text('電力問題')),
-                    DropdownMenuItem(value: '水管漏水', child: Text('水管漏水')),
-                    DropdownMenuItem(value: '網路異常', child: Text('網路異常')),
-                    DropdownMenuItem(value: '其他', child: Text('其他')),
-                  ],
-                  hint: const Text('請選擇'),
-                  onChanged: (value) {
-                    setState(() {
-                      _repairType = value;
-                    });
-                  },
-                  validator: (value) => value == null ? '請選擇報修類別' : null,
-                ),
-                const SizedBox(height: 12),
-                const Text(
-                  '地點/房號',
-                  style: TextStyle(fontWeight: FontWeight.bold),
-                ),
-                TextFormField(
-                  controller: _locationController,
-                  decoration: const InputDecoration(hintText: '如：B棟 3F'),
-                  validator:
-                      (value) =>
-                          value == null || value.isEmpty ? '請輸入地點' : null,
-                ),
-                const SizedBox(height: 12),
-                const Text(
-                  '問題描述',
-                  style: TextStyle(fontWeight: FontWeight.bold),
-                ),
-                TextFormField(
-                  controller: _descriptionController,
-                  maxLines: 3,
-                  decoration: const InputDecoration(
-                    hintText: '請簡要描述問題...',
-                    border: OutlineInputBorder(),
-                  ),
-                  validator:
-                      (value) =>
-                          value == null || value.isEmpty ? '請輸入問題描述' : null,
-                ),
-                const SizedBox(height: 12),
-                const Text(
-                  '照片上傳（選填）',
-                  style: TextStyle(fontWeight: FontWeight.bold),
-                ),
-                Row(
-                  children: [
-                    ElevatedButton(
-                      onPressed: _pickImage,
-                      child: const Text(
-                        '選擇照片',
-                        style: TextStyle(color: Colors.purple),
-                      ),
-                    ),
-                    const SizedBox(width: 8),
-                    if (_photo != null)
-                      Text('已選擇圖片', style: TextStyle(color: Colors.green)),
-                  ],
-                ),
-                const SizedBox(height: 16),
-                ElevatedButton(
-                  onPressed: _submitForm,
-                  style: ElevatedButton.styleFrom(
-                    backgroundColor: Colors.green,
-                    minimumSize: const Size.fromHeight(48),
-                  ),
-                  child: const Text(
-                    '送出報修',
-                    style: TextStyle(color: Colors.white),
+                  '水電網路報修',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 20,
+                    color: Colors.white,
                   ),
                 ),
               ],
             ),
           ),
-          const SizedBox(height: 24),
-          const Text('📋 已申報紀錄', style: TextStyle(fontSize: 16)),
-          const SizedBox(height: 12),
-          ..._repairRecords.map(
-            (record) => Padding(
-              padding: const EdgeInsets.symmetric(vertical: 8.0),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    '${record["date"]} - ${record["type"]}',
-                    style: const TextStyle(fontWeight: FontWeight.bold),
+
+          Expanded(
+            child: ListView(
+              controller: widget.scrollController,
+              padding: const EdgeInsets.all(16),
+              children: [
+                const Text('🛠️ 填寫報修單', style: TextStyle(fontSize: 16)),
+                const SizedBox(height: 12),
+                Form(
+                  key: _formKey,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const Text(
+                        '報修類別',
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      DropdownButtonFormField<String>(
+                        value: _repairType,
+                        items: const [
+                          DropdownMenuItem(value: '電力問題', child: Text('電力問題')),
+                          DropdownMenuItem(value: '水管漏水', child: Text('水管漏水')),
+                          DropdownMenuItem(value: '網路異常', child: Text('網路異常')),
+                          DropdownMenuItem(value: '其他', child: Text('其他')),
+                        ],
+                        hint: const Text('請選擇'),
+                        onChanged: (value) {
+                          setState(() {
+                            _repairType = value;
+                          });
+                        },
+                        validator: (value) => value == null ? '請選擇報修類別' : null,
+                      ),
+                      const SizedBox(height: 12),
+                      const Text(
+                        '地點/房號',
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      TextFormField(
+                        controller: _locationController,
+                        decoration: const InputDecoration(hintText: '如：B棟 3F'),
+                        validator:
+                            (value) =>
+                                value == null || value.isEmpty ? '請輸入地點' : null,
+                      ),
+                      const SizedBox(height: 12),
+                      const Text(
+                        '問題描述',
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      TextFormField(
+                        controller: _descriptionController,
+                        maxLines: 3,
+                        decoration: const InputDecoration(
+                          hintText: '請簡要描述問題...',
+                          border: OutlineInputBorder(),
+                        ),
+                        validator:
+                            (value) =>
+                                value == null || value.isEmpty
+                                    ? '請輸入問題描述'
+                                    : null,
+                      ),
+                      const SizedBox(height: 12),
+                      const Text(
+                        '照片上傳（選填）',
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      Row(
+                        children: [
+                          ElevatedButton(
+                            onPressed: _pickImage,
+                            style: ElevatedButton.styleFrom(
+                              backgroundColor: Colors.white,
+                            ),
+                            child: const Text(
+                              '選擇照片',
+                              style: TextStyle(color: Colors.purple),
+                            ),
+                          ),
+                          const SizedBox(width: 8),
+                          if (_photo != null)
+                            const Text(
+                              '已選擇圖片',
+                              style: TextStyle(color: Colors.green),
+                            ),
+                        ],
+                      ),
+                      const SizedBox(height: 16),
+                      ElevatedButton(
+                        onPressed: _submitForm,
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: Colors.green,
+                          minimumSize: const Size.fromHeight(48),
+                        ),
+                        child: const Text(
+                          '送出報修',
+                          style: TextStyle(color: Colors.white),
+                        ),
+                      ),
+                    ],
                   ),
-                  Text('地點：${record["location"]}｜狀態：${record["status"]}'),
-                ],
-              ),
+                ),
+                const SizedBox(height: 24),
+                const Text('📋 已申報紀錄', style: TextStyle(fontSize: 16)),
+                const SizedBox(height: 12),
+                ..._repairRecords.map(
+                  (record) => Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 8.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          '${record["date"]} - ${record["type"]}',
+                          style: const TextStyle(fontWeight: FontWeight.bold),
+                        ),
+                        Text('地點：${record["location"]}｜狀態：${record["status"]}'),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
             ),
           ),
         ],
@@ -185,3 +227,24 @@ class _RepairPageState extends State<RepairPage> {
     );
   }
 }
+
+// 浮層包裝元件，給 showModalBottomSheet 使用
+class RepairPageWrapper extends StatelessWidget {
+  const RepairPageWrapper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+      initialChildSize: 0.95,
+      minChildSize: 0.5,
+      maxChildSize: 1.0,
+      expand: false,
+      builder: (_, scrollController) {
+        return Container(
+          color: Colors.transparent,
+          child: RepairPage(scrollController: scrollController),
+        );
+      },
+    );
+  }
+}

lib/visitor.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+
+class VisitorPage extends StatelessWidget {
+  final ScrollController scrollController;
+
+  const VisitorPage({super.key, required this.scrollController});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          decoration: const BoxDecoration(
+            color: Color(0xFF9EAF9F),
+            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+          ),
+          child: Row(
+            children: [
+              IconButton(
+                icon: const Icon(Icons.close, color: Colors.white),
+                onPressed: () => Navigator.pop(context),
+              ),
+              const SizedBox(width: 8),
+              const Text(
+                '訪客來訪紀錄',
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 20,
+                  color: Colors.white,
+                ),
+              ),
+            ],
+          ),
+        ),
+        Expanded(
+          child: Container(
+            color: const Color(0xFFF7F8FA),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            child: ListView(
+              controller: scrollController,
+              children: [
+                const Text(
+                  '📝 訪客紀錄',
+                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+                ),
+                const SizedBox(height: 12),
+                _buildVisitorItem('2025/04/22 14:35', '王小明', '身分：朋友｜目的：拜訪林小安'),
+                _buildVisitorItem('2025/04/21 10:20', '陳美麗', '身分：水電師傅｜目的：維修浴室'),
+                _buildVisitorItem(
+                  '2025/04/20 17:45',
+                  '李建國',
+                  '身分：外送員｜目的：送晚餐（Uber Eats）',
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildVisitorItem(String date, String name, String detail) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      decoration: const BoxDecoration(
+        border: Border(bottom: BorderSide(color: Color(0xFFEEEEEE))),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                date,
+                style: const TextStyle(fontSize: 14, color: Color(0xFF555555)),
+              ),
+              Text(
+                name,
+                style: const TextStyle(fontSize: 14, color: Color(0xFF555555)),
+              ),
+            ],
+          ),
+          const SizedBox(height: 4),
+          Text(
+            detail,
+            style: const TextStyle(fontSize: 13, color: Color(0xFF777777)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// 👇 包裝元件一樣寫在這
+class VisitorPageWrapper extends StatelessWidget {
+  const VisitorPageWrapper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+      initialChildSize: 0.95,
+      minChildSize: 0.5,
+      maxChildSize: 1.0,
+      expand: false,
+      builder: (_, scrollController) {
+        return Container(
+          decoration: const BoxDecoration(color: Colors.transparent),
+          child: VisitorPage(scrollController: scrollController),
+        );
+      },
+    );
+  }
+}