setting_pageに反映させる＆apptitleのUI修正＆bottom_navigationにsetting_page反映

shinonome-inc · Mar 8, 2024 · fdab6b5 · fdab6b5
1 parent feeda29
commit fdab6b5
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 45 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,28 @@
+{
+    // IntelliSense を使用して利用可能な属性を学べます。
+    // 既存の属性の説明をホバーして表示します。
+    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "qiita_app",
+            "cwd": "qiita_app",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "qiita_app (profile mode)",
+            "cwd": "qiita_app",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "qiita_app (release mode)",
+            "cwd": "qiita_app",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}
diff --git a/qiita_app/lib/pages/setting_page.dart b/qiita_app/lib/pages/setting_page.dart
@@ -1,60 +1,154 @@
 import 'package:flutter/material.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+import 'package:qiita_app/constants/app_colors.dart';
+import 'package:qiita_app/widgets/app_title.dart';
+import 'package:qiita_app/widgets/setting_section_title.dart';
+import '../widgets/setting_item.dart';
 import 'package:qiita_app/constants/app_text_style.dart';
 import 'package:qiita_app/constants/texts.dart';
 import 'package:qiita_app/widgets/app_bottom_modal_sheet.dart';
 
-import 'package:qiita_app/widgets/rounded_edge_button.dart';
-import 'package:qiita_app/constants/app_colors.dart';
-
-class SettingPage extends StatefulWidget {
-  const SettingPage({Key? key}) : super(key: key);
+class SettingsPage extends StatefulWidget {
+  const SettingsPage({Key? key}) : super(key: key);
 
   @override
-  State<SettingPage> createState() => _SettingPageState();
+  State<SettingsPage> createState() => _SettingsPageState();
 }
 
-class _SettingPageState extends State<SettingPage> {
+class _SettingsPageState extends State<SettingsPage> {
+  String version = 'v0.0.0';
+  Future<void> setVersion() async {
+    PackageInfo packageInfo = await PackageInfo.fromPlatform();
+    setState(() {
+      version = 'v${packageInfo.version}';
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    setVersion();
+  }
+
+  Widget buildCustomDivider({
+    Color color = AppColors.divider,
+    double height = 0.5,
+    double indent = 16.0,
+  }) {
+    return Divider(
+      color: color,
+      height: height,
+      indent: indent,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            RoundedEdgeButton(
-              text: "プライバシーポリシー",
-              backgroundColor: AppColors.primary,
-              onPressed: () {
-                showAppBottomModalSheet(
-                  context,
-                  title: "プライバシーポリシー",
-                  content: const Text(
-                    Texts.privacyPolicyText,
-                    style: AppTextStyles.h3BasicBlack,
-                  ),
-                );
-              },
-            ),
-            const SizedBox(
-              height: 42,
-            ),
-            RoundedEdgeButton(
-              text: "利用規約",
-              backgroundColor: AppColors.primary,
-              onPressed: () {
-                showAppBottomModalSheet(
-                  context,
-                  title: "利用規約",
-                  content: const Text(
-                    Texts.termsService,
-                    style: AppTextStyles.h3BasicBlack,
-                  ),
-                );
-              },
+      appBar: const AppTitle(
+        title: "Settings",
+        showSearchBar: false,
+        showBottomDivider: true,
+        // dividerHeight: 4.2,
+      ),
+      body: ListView(
+        children: [
+          const SectionTitle(title: 'アプリ情報'),
+          SettingItem(
+            title: 'プライバシーポリシー',
+            onTap: () {
+              showAppBottomModalSheet(
+                context,
+                title: "プライバシーポリシー",
+                content: const Text(
+                  Texts.privacyPolicyText,
+                  style: AppTextStyles.h2BasicBlack,
+                ),
+              );
+            },
+          ),
+          buildCustomDivider(),
+          SettingItem(
+            title: '利用規約',
+            onTap: () {
+              showAppBottomModalSheet(
+                context,
+                title: "利用規約",
+                content: const Text(
+                  Texts.termsService,
+                  style: AppTextStyles.h3BasicBlack,
+                ),
+              );
+            },
+          ),
+          buildCustomDivider(),
+          ListTile(
+            tileColor: Colors.white,
+            title: Row(
+              children: [
+                const Text('アプリバージョン'),
+                const Spacer(),
+                Text(version),
+              ],
             ),
-          ],
-        ),
+          ),
+          buildCustomDivider(),
+          const SectionTitle(title: 'その他'),
+          SettingItem(
+            title: 'ログアウトする',
+            onTap: () {
+              // ログアウト処理をあとで追加
+            },
+            showArrow: false,
+          ),
+          buildCustomDivider(),
+        ],
       ),
     );
   }
 }
+// class _SettingPageState extends State<SettingPage> {
+//   @override
+//   Widget build(BuildContext context) {
+//     return Scaffold(
+//       body: Center(
+//         child: Column(
+//           mainAxisAlignment: MainAxisAlignment.center,
+//           children: [
+//             RoundedEdgeButton(
+//               text: "プライバシーポリシー",
+//               backgroundColor: AppColors.primary,
+//               onPressed: () {
+//                 showAppBottomModalSheet(
+//                   context,
+//                   title: "プライバシーポリシー",
+//                   content: const Text(
+//                     Texts.privacyPolicyText,
+//                     style: AppTextStyles.h2BasicBlack,
+//                   ),
+//                 );
+//               },
+//             ),
+//             const SizedBox(
+//               height: 42,
+//             ),
+//             RoundedEdgeButton(
+//               text: "利用規約",
+//               backgroundColor: AppColors.primary,
+//               onPressed: () {
+//                 showAppBottomModalSheet(
+//                   context,
+//                   title: "利用規約",
+//                   content: const Text(
+//                     Texts.termsService,
+//                     style: AppTextStyles.h3BasicBlack,
+//                   ),
+//                 );
+//               },
+//             ),
+//           ],
+//         ),
+//       ),
+//     );
+//   }
+// }
diff --git a/qiita_app/lib/widgets/app_title.dart b/qiita_app/lib/widgets/app_title.dart
@@ -45,7 +45,7 @@ class AppTitle extends StatelessWidget implements PreferredSizeWidget {
               title,
               style: style ?? AppTextStyles.apptitle,
             ),
-            const SizedBox(height: 19),
+            const SizedBox(height: 10),
             if (showSearchBar) const SearchBarWithIcon(),
             if (showBottomDivider) SizedBox(height: dividerHeight),
           ],

diff --git a/qiita_app/lib/widgets/bottom_navigation.dart b/qiita_app/lib/widgets/bottom_navigation.dart
@@ -21,7 +21,7 @@ class _BottomNavigationState extends State<BottomNavigation> {
     Text(
       'Index 2: mypage',
     ),
-    SettingPage(),
+    SettingsPage(),
   ];
 
   void _onItemTapped(int index) {

diff --git a/qiita_app/lib/widgets/setting_item.dart b/qiita_app/lib/widgets/setting_item.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:qiita_app/constants/app_colors.dart';
+
+class SettingItem extends StatelessWidget {
+  final String title;
+  final VoidCallback onTap;
+  final bool showArrow;
+
+  const SettingItem({
+    Key? key,
+    required this.title,
+    required this.onTap,
+    this.showArrow = true,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      tileColor: AppColors.white,
+      title: Text(title),
+      trailing: showArrow ? const Icon(Icons.arrow_forward_ios) : null,
+      onTap: onTap,
+    );
+  }
+}
diff --git a/qiita_app/lib/widgets/setting_section_title.dart b/qiita_app/lib/widgets/setting_section_title.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+import '../constants/app_colors.dart';
+
+class SectionTitle extends StatelessWidget {
+  final String title;
+
+  const SectionTitle({
+    Key? key,
+    required this.title,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16.0, 32.0, 16.0, 8.0),
+      child: Text(
+        title,
+        style: const TextStyle(fontSize: 12, color: AppColors.secondary),
+      ),
+    );
+  }
+}
diff --git a/qiita_app/pubspec.yaml b/qiita_app/pubspec.yaml
@@ -12,6 +12,8 @@ dependencies:
   flutter:
     sdk: flutter
   http: ^0.13.3
+  package_info_plus: ^4.2.0
+
 
 
   cupertino_icons: ^1.0.6