me page ui

lib/component/app/app_type_component.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+import '../../const/base.dart';
+
+class AppTypeComponent extends StatefulWidget {
+  int appType;
+
+  AppTypeComponent(this.appType);
+
+  @override
+  State<StatefulWidget> createState() {
+    return _AppTypeComponent();
+  }
+}
+
+class _AppTypeComponent extends State<AppTypeComponent> {
+  @override
+  Widget build(BuildContext context) {
+    var themeData = Theme.of(context);
+
+    return Container(
+      decoration: BoxDecoration(
+        color: themeData.hintColor.withOpacity(0.3),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: EdgeInsets.only(
+        left: Base.BASE_PADDING_HALF,
+        right: Base.BASE_PADDING_HALF,
+        top: 4,
+        bottom: 4,
+      ),
+      child: Text(
+        "WEB",
+        style: TextStyle(
+          fontSize: themeData.textTheme.bodySmall!.fontSize,
+          color: themeData.hintColor,
+        ),
+      ),
+    );
+  }
+}

lib/component/auth_dialog/auth_app_info_component.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:nowser/const/app_type.dart';
 import 'package:nowser/const/base.dart';
 
+import '../app/app_type_component.dart';
+
 class AuthAppInfoComponent extends StatefulWidget {
   @override
   State<StatefulWidget> createState() {
@@ -50,25 +53,7 @@ class _AuthAppInfoComponent extends State<AuthAppInfoComponent> {
         ),
         Positioned(
           right: 16,
-          child: Container(
+          child: AppTypeComponent(AppType.WEB),
-            decoration: BoxDecoration(
-              color: themeData.hintColor.withOpacity(0.3),
-              borderRadius: BorderRadius.circular(8),
-            ),
-            padding: EdgeInsets.only(
-              left: Base.BASE_PADDING_HALF,
-              right: Base.BASE_PADDING_HALF,
-              top: 4,
-              bottom: 4,
-            ),
-            child: Text(
-              "WEB",
-              style: TextStyle(
-                fontSize: themeData.textTheme.bodySmall!.fontSize,
-                color: themeData.hintColor,
-              ),
-            ),
-          ),
         )
       ],
     );

lib/component/user_pic_component.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class UserPicComponent extends StatefulWidget {
+  double width;
+
+  UserPicComponent({required this.width});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _UserPicComponent();
+  }
+}
+
+class _UserPicComponent extends State<UserPicComponent> {
+  @override
+  Widget build(BuildContext context) {
+    Widget innerWidget = Icon(
+      Icons.account_circle,
+      size: widget.width,
+    );
+
+    return Container(
+      width: widget.width,
+      height: widget.width,
+      clipBehavior: Clip.hardEdge,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(widget.width / 2),
+      ),
+      child: innerWidget,
+    );
+  }
+}

lib/component/webview/web_home_component.dart

@@ -63,7 +63,8 @@ class _WebHomeComponent extends State<WebHomeComponent> {
                 }),
                 wrapBottomBtn(const Icon(Icons.space_dashboard)),
                 wrapBottomBtn(const Icon(Icons.segment), onTap: () {
-                  AuthDialog.show(context);
+                  // AuthDialog.show(context);
+                  RouterUtil.router(context, RouterPath.ME);
                 }),
               ],
             ),

lib/const/router_path.dart

@@ -1,4 +1,5 @@
 class RouterPath {
   static const String INDEX = "/";
   static const String WEB_TABS = "/webTabs";
+  static const String ME = "/me";
 }

lib/main.dart

@@ -11,6 +11,7 @@ import 'package:nowser/data/db.dart';
 import 'package:nowser/provider/key_provider.dart';
 import 'package:nowser/provider/web_provider.dart';
 import 'package:nowser/router/index/index_router.dart';
+import 'package:nowser/router/me/me_router.dart';
 import 'package:nowser/router/web_tabs_select/web_tabs_select_router.dart';
 import 'package:provider/provider.dart';
 import 'package:receive_intent/receive_intent.dart' as receiveIntent;
@@ -75,6 +76,7 @@ class _MyApp extends State<MyApp> {
     routes = {
       RouterPath.INDEX: (context) => IndexRouter(),
       RouterPath.WEB_TABS: (context) => WebTabsSelectRouter(),
+      RouterPath.ME: (context) => MeRouter(),
     };
 
     return MultiProvider(

lib/router/me/me_router.dart

@@ -0,0 +1,206 @@
+import 'package:flutter/material.dart';
+import 'package:nowser/component/user_pic_component.dart';
+import 'package:nowser/const/base.dart';
+import 'package:nowser/router/me/me_router_log_item_component.dart';
+import 'package:nowser/router/me/me_router_web_item_component.dart';
+
+import 'me_router_app_item_component.dart';
+
+class MeRouter extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _MeRouter();
+  }
+}
+
+class _MeRouter extends State<MeRouter> {
+  @override
+  Widget build(BuildContext context) {
+    var mediaQueryData = MediaQuery.of(context);
+    var themeData = Theme.of(context);
+
+    var listWidgetMargin = EdgeInsets.only(
+      top: Base.BASE_PADDING,
+      bottom: Base.BASE_PADDING,
+    );
+
+    List<Widget> defaultUserWidgets = [];
+    defaultUserWidgets.add(Container(
+      margin: EdgeInsets.only(
+        left: Base.BASE_PADDING,
+      ),
+      child: UserPicComponent(width: 50),
+    ));
+    defaultUserWidgets.add(Container(
+      margin: EdgeInsets.only(left: Base.BASE_PADDING),
+      child: Text("Click and Login"),
+    ));
+    defaultUserWidgets.add(Expanded(child: Container()));
+    defaultUserWidgets.add(Container(
+      margin: EdgeInsets.only(right: Base.BASE_PADDING),
+      child: Icon(Icons.settings),
+    ));
+    var defaultUserWidget = Container(
+      margin: const EdgeInsets.only(
+        top: Base.BASE_PADDING,
+      ),
+      child: Row(
+        children: defaultUserWidgets,
+      ),
+    );
+
+    List<Widget> memberList = [];
+    for (var i = 0; i < 3; i++) {
+      memberList.add(Container(
+        margin: EdgeInsets.only(left: Base.BASE_PADDING_HALF),
+        child: UserPicComponent(width: 30),
+      ));
+    }
+    memberList.add(Expanded(child: Container()));
+    memberList.add(GestureDetector(
+      child: Icon(Icons.chevron_right),
+    ));
+    var memberListWidget = Container(
+      decoration: BoxDecoration(
+        color: themeData.cardColor,
+        borderRadius: BorderRadius.circular(
+          Base.BASE_PADDING,
+        ),
+      ),
+      margin: listWidgetMargin,
+      padding: EdgeInsets.all(Base.BASE_PADDING),
+      child: Row(
+        children: memberList,
+      ),
+    );
+
+    List<Widget> webItemList = [];
+    webItemList.add(MeRouterWebItemComponent(
+      num: 102,
+      name: "Bookmarks",
+      // margin: EdgeInsets.only(right: Base.BASE_PADDING),
+    ));
+    webItemList.add(MeRouterWebItemComponent(
+      num: 999,
+      name: "Historys",
+      // margin:
+      //     EdgeInsets.only(left: Base.BASE_PADDING, right: Base.BASE_PADDING),
+    ));
+    webItemList.add(MeRouterWebItemComponent(
+      num: 30,
+      name: "Downloads",
+      // margin:
+      //     EdgeInsets.only(left: Base.BASE_PADDING, right: Base.BASE_PADDING),
+    ));
+    webItemList.add(MeRouterWebItemComponent(
+      num: 102,
+      name: "Bookmarks",
+      // margin: EdgeInsets.only(left: Base.BASE_PADDING),
+    ));
+    var webItemWidget = Container(
+      margin: listWidgetMargin,
+      child: Row(
+        children: webItemList,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      ),
+    );
+
+    List<Widget> appList = [];
+    appList.add(Container(
+      child: MeRouterAppItemComponent(),
+    ));
+    appList.add(Divider());
+    appList.add(Container(
+      child: MeRouterAppItemComponent(),
+    ));
+    appList.add(Divider());
+    appList.add(Container(
+      child: MeRouterAppItemComponent(),
+    ));
+    appList.add(Divider());
+    appList.add(Container(
+      alignment: Alignment.center,
+      child: Text(
+        "Show more",
+        style: TextStyle(
+          decoration: TextDecoration.underline,
+        ),
+      ),
+    ));
+    var appListWidget = Container(
+      margin: listWidgetMargin,
+      padding: EdgeInsets.all(Base.BASE_PADDING),
+      decoration: BoxDecoration(
+        color: themeData.cardColor,
+        borderRadius: BorderRadius.circular(
+          Base.BASE_PADDING,
+        ),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: appList,
+      ),
+    );
+
+    List<Widget> logList = [];
+    logList.add(Container(
+      child: MeRouterLogItemComponent(),
+    ));
+    logList.add(Divider());
+    logList.add(Container(
+      child: MeRouterLogItemComponent(),
+    ));
+    logList.add(Divider());
+    logList.add(Container(
+      child: MeRouterLogItemComponent(),
+    ));
+    logList.add(Divider());
+    logList.add(Container(
+      alignment: Alignment.center,
+      child: Text(
+        "Show more",
+        style: TextStyle(
+          decoration: TextDecoration.underline,
+        ),
+      ),
+    ));
+    var logListWidget = Container(
+      margin: listWidgetMargin,
+      padding: EdgeInsets.all(Base.BASE_PADDING),
+      decoration: BoxDecoration(
+        color: themeData.cardColor,
+        borderRadius: BorderRadius.circular(
+          Base.BASE_PADDING,
+        ),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: logList,
+      ),
+    );
+
+    var main = SingleChildScrollView(
+      child: Container(
+        padding: EdgeInsets.only(
+          left: Base.BASE_PADDING,
+          right: Base.BASE_PADDING,
+          top: mediaQueryData.padding.top + Base.BASE_PADDING,
+          bottom: mediaQueryData.padding.bottom + Base.BASE_PADDING,
+        ),
+        child: Column(
+          children: [
+            defaultUserWidget,
+            memberListWidget,
+            webItemWidget,
+            appListWidget,
+            logListWidget,
+          ],
+        ),
+      ),
+    );
+
+    return Scaffold(
+      body: main,
+    );
+  }
+}

lib/router/me/me_router_app_item_component.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:nowser/component/app/app_type_component.dart';
+import 'package:nowser/const/app_type.dart';
+
+import '../../const/base.dart';
+
+class MeRouterAppItemComponent extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _MeRouterAppItemComponent();
+  }
+}
+
+class _MeRouterAppItemComponent extends State<MeRouterAppItemComponent> {
+  @override
+  Widget build(BuildContext context) {
+    var imageWidget = Container(
+      margin: EdgeInsets.only(
+        left: Base.BASE_PADDING_HALF,
+        right: Base.BASE_PADDING,
+      ),
+      child: Icon(Icons.image),
+    );
+
+    var titleWidget = Container(
+      margin: EdgeInsets.only(right: Base.BASE_PADDING),
+      child: Text("Title APP"),
+    );
+
+    var typeWidget = Container(
+      child: AppTypeComponent(AppType.WEB),
+    );
+
+    var rightIconWidget = Container(
+      child: Icon(Icons.chevron_right),
+    );
+
+    return Container(
+      child: Row(
+        children: [
+          imageWidget,
+          titleWidget,
+          typeWidget,
+          Expanded(child: Container()),
+          rightIconWidget,
+        ],
+      ),
+    );
+  }
+}

lib/router/me/me_router_log_item_component.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:nowser/const/base.dart';
+
+class MeRouterLogItemComponent extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _MeRouterLogItemComponent();
+  }
+}
+
+class _MeRouterLogItemComponent extends State<MeRouterLogItemComponent> {
+  @override
+  Widget build(BuildContext context) {
+    var appNameWidget = Container(
+      constraints: BoxConstraints(maxWidth: 80),
+      margin: EdgeInsets.only(
+        left: Base.BASE_PADDING_HALF,
+        right: Base.BASE_PADDING,
+      ),
+      child: Text(
+        "APP Name APP Name",
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+
+    var logWidget = Expanded(
+        child: Container(
+      child: Text(
+        "Log Log Log Log Log Log Log Log Log Log Log Log Log Log Log Log",
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+    ));
+
+    var rightIconWidget = Container(
+      child: Icon(Icons.chevron_right),
+    );
+
+    return Container(
+      child: Row(
+        children: [
+          appNameWidget,
+          logWidget,
+          rightIconWidget,
+        ],
+      ),
+    );
+  }
+}

lib/router/me/me_router_web_item_component.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:nowser/const/base.dart';
+
+class MeRouterWebItemComponent extends StatefulWidget {
+  int num;
+
+  String name;
+
+  // EdgeInsetsGeometry margin;
+
+  MeRouterWebItemComponent({
+    required this.num,
+    required this.name,
+    // required this.margin,
+  });
+
+  @override
+  State<StatefulWidget> createState() {
+    return _MeRouterWebItemComponent();
+  }
+}
+
+class _MeRouterWebItemComponent extends State<MeRouterWebItemComponent> {
+  @override
+  Widget build(BuildContext context) {
+    var themeData = Theme.of(context);
+    var cardColor = themeData.cardColor;
+
+    return Container(
+      alignment: Alignment.center,
+      // margin: widget.margin,
+      child: Container(
+        width: 80,
+        padding: const EdgeInsets.only(
+          left: Base.BASE_PADDING,
+          right: Base.BASE_PADDING,
+          top: Base.BASE_PADDING,
+          bottom: Base.BASE_PADDING,
+        ),
+        decoration: BoxDecoration(
+          color: cardColor,
+          borderRadius: BorderRadius.circular(Base.BASE_PADDING),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              "${widget.num}",
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+            Text(
+              widget.name,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}