Leecheng/CommunityAPP
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jasonchenwork 2025-06-02 14:37:05 +08:00
parent cf860a7da7
commit 50e2e98fcb
5 changed files with 511 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
lib/home_content_page.dart
View File

@ -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),
),
),
],
),
],
),

44
lib/home_page.dart
View File

@ -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,

168
lib/message_page.dart
View File

@ -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();
}
}

38
lib/personal_page.dart
View File

@ -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),
),
),
);
}

275
lib/reapair.dart
View File

@ -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),
);
},
);
}
}