完成个人中心

lib/main.dart

@@ -57,7 +57,7 @@ class MyApp extends StatelessWidget {
           footerTriggerDistance: 150,
           child: Obx(() {
             return ConfigService.to.isGrayFilter.isTrue ? ColorFiltered(
-              colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
+              colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
               child: app,
             ) : app;
           }),

lib/modules/account/account_page.dart

@@ -1,14 +1,203 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:news_getx/data/services/config.dart';
+import 'package:news_getx/data/services/user.dart';
+import 'package:news_getx/modules/widgets/button.dart';
+import 'package:news_getx/theme/app_colors.dart';
+import 'package:news_getx/theme/app_radii.dart';
 
 import 'account_controller.dart';
 
 class AccountPage extends GetView<AccountController> {
   const AccountPage({Key? key}) : super(key: key);
 
+  // 个人页面 头部
+  Widget _buildUserHeader() {
+    return Container(
+      padding: EdgeInsets.all(20.w),
+      decoration: BoxDecoration(
+          color: AppColors.primaryBackground,
+          border: Border(
+            bottom: BorderSide(
+              color: AppColors.tabCellSeparator,
+              width: 2,
+            ),
+          )),
+      child: Column(
+        children: [
+          // 头像
+          Container(
+            height: 200.h,
+            alignment: Alignment.center,
+            child: ClipOval(
+              child: Image.asset(
+                "assets/images/account_header.png",
+                height: 108,
+                width: 108,
+                fit: BoxFit.fill,
+              ),
+            ),
+          ),
+
+          // 文字
+          Text(
+            UserService.to.profile.displayName ?? "unknown",
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: AppColors.primaryText,
+              fontFamily: "Montserrat",
+              fontWeight: FontWeight.w400,
+              fontSize: 24.sp,
+            ),
+          ),
+          Container(
+            margin: EdgeInsets.only(top: 9.h, bottom: 16.h),
+            child: Text(
+              "@boltrogers",
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                color: AppColors.primaryText,
+                fontFamily: "Avenir",
+                fontWeight: FontWeight.w400,
+                fontSize: 16.sp,
+              ),
+            ),
+          ),
+
+          // 按钮 crossAxisAlignment会导致设置的宽度时效
+          FlatButton(
+            height: 40.h,
+            width: double.infinity,
+            onPressed: () {},
+            title: "Get Premium - \$9.99",
+          ),
+        ],
+      ),
+    );
+  }
+
+  // 列表项
+  Widget _buildCell({
+    required String title,
+    String? subTitle,
+    int? number,
+    bool hasArrow = false,
+    GestureTapCallback? onTap,
+  }) {
+    var rightWidget = <Widget>[
+      Text(
+        subTitle ?? number?.toString() ?? "",
+        textAlign: TextAlign.left,
+        style: TextStyle(
+          color: AppColors.primaryText,
+          fontFamily: "Montserrat",
+          fontWeight: FontWeight.w400,
+          fontSize: 18.sp,
+        ),
+      ),
+    ];
+
+    if (hasArrow) {
+      rightWidget.addAll([
+        SizedBox(width: 10.w),
+        Icon(Icons.arrow_forward_ios),
+      ]);
+    }
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        color: Colors.white,
+        height: 60.h,
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              title,
+              textAlign: TextAlign.left,
+              style: TextStyle(
+                color: AppColors.primaryText,
+                fontFamily: "Montserrat",
+                fontWeight: FontWeight.w400,
+                fontSize: 18.sp,
+              ),
+            ),
+            Row(
+              children: rightWidget,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _divider10() {
+    return Divider(
+      color: AppColors.secondaryElement,
+      thickness: 10.h,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-
+    return SingleChildScrollView(
-    return Container();
+      child: Column(
+        children: [
+          _buildUserHeader(),
+          _divider10(),
+          _buildCell(
+            title: "Email",
+            subTitle: "boltrogers@gmail.com",
+          ),
+          _divider10(),
+          _buildCell(
+            title: "Favorite channels",
+            number: 12,
+            hasArrow: true,
+          ),
+          _buildCell(
+            title: "Bookmarks",
+            number: 294,
+            hasArrow: true,
+          ),
+          _buildCell(
+            title: "Popular categories",
+            number: 7,
+            hasArrow: true,
+          ),
+          _divider10(),
+          _buildCell(
+            title: "Newsletter",
+            hasArrow: true,
+          ),
+          _buildCell(
+            title: "Settings",
+            hasArrow: true,
+            onTap: () {
+              print("点击测试");
+            },
+          ),
+          _divider10(),
+          _buildCell(
+            title: "Switch Gray Filter",
+            hasArrow: true,
+            onTap: () {
+              ConfigService.to.changeGrayTheme();
+            },
+          ),
+          _buildCell(
+            title: "Log out",
+            hasArrow: true,
+            onTap: () {
+              print('Log out');
+              UserService.to.onLogout();
+            },
+          ),
+          _divider10(),
+        ],
+      ),
+    );
   }
 }

lib/modules/application/application_page.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:news_getx/modules/account/account_page.dart';
+import 'package:news_getx/modules/bookmarks/bookmarks_page.dart';
 import 'package:news_getx/modules/category/category_page.dart';
 import 'package:news_getx/modules/main/main_page.dart';
 import 'package:news_getx/modules/widgets/app_bar.dart';
@@ -45,8 +47,8 @@ class ApplicationPage extends GetView<ApplicationController> {
       children: <Widget>[
         MainPage(),
         CategoryPage(),
-        Text('BookmarksPage'),
+        BookmarksPage(),
-        Text('AccountPage'),
+        AccountPage(),
       ],
     );
   }

lib/routes/app_pages.dart

@@ -2,8 +2,10 @@ import 'package:flutter/cupertino.dart';
 import 'package:get/get.dart';
 import 'package:news_getx/middlewares/router_auth.dart';
 import 'package:news_getx/middlewares/router_welcome.dart';
+import 'package:news_getx/modules/account/account_binding.dart';
 import 'package:news_getx/modules/application/application_binding.dart';
 import 'package:news_getx/modules/application/application_page.dart';
+import 'package:news_getx/modules/bookmarks/bookmarks_binding.dart';
 import 'package:news_getx/modules/category/category_binding.dart';
 import 'package:news_getx/modules/category/category_page.dart';
 import 'package:news_getx/modules/main/main_binding.dart';
@@ -53,7 +55,12 @@ abstract class AppPages {
       name: AppRoutes.Application,
       page: () => ApplicationPage(),
       binding: ApplicationBinding(),
-      bindings: [MainBinding(), CategoryBinding()],
+      bindings: [
+        MainBinding(),
+        CategoryBinding(),
+        BookmarksBinding(),
+        AccountBinding(),
+      ],
       middlewares: [
         RouteAuthMiddleware(),
       ],