添加圈子页面UI

circle_app/ios/Podfile.lock

@@ -3,17 +3,32 @@ PODS:
   - fluttertoast (0.0.2):
     - Flutter
     - Toast
+  - FMDB (2.7.5):
+    - FMDB/standard (= 2.7.5)
+  - FMDB/standard (2.7.5)
   - image_picker_ios (0.0.1):
     - Flutter
+  - path_provider_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
+  - sqflite (0.0.3):
+    - Flutter
+    - FMDB (>= 2.7.5)
   - Toast (4.0.0)
+  - url_launcher_ios (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - fluttertoast (from `.symlinks/plugins/fluttertoast/ios`)
   - image_picker_ios (from `.symlinks/plugins/image_picker_ios/ios`)
+  - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/ios`)
+  - sqflite (from `.symlinks/plugins/sqflite/ios`)
+  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
 
 SPEC REPOS:
   trunk:
+    - FMDB
     - Toast
 
 EXTERNAL SOURCES:
@@ -23,12 +38,22 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/fluttertoast/ios"
   image_picker_ios:
     :path: ".symlinks/plugins/image_picker_ios/ios"
+  path_provider_foundation:
+    :path: ".symlinks/plugins/path_provider_foundation/ios"
+  sqflite:
+    :path: ".symlinks/plugins/sqflite/ios"
+  url_launcher_ios:
+    :path: ".symlinks/plugins/url_launcher_ios/ios"
 
 SPEC CHECKSUMS:
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   fluttertoast: fafc4fa4d01a6a9e4f772ecd190ffa525e9e2d9c
+  FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
   image_picker_ios: 4a8aadfbb6dc30ad5141a2ce3832af9214a705b5
+  path_provider_foundation: eaf5b3e458fc0e5fbb9940fb09980e853fe058b8
+  sqflite: 31f7eba61e3074736dff8807a9b41581e4f7f15a
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
+  url_launcher_ios: 08a3dfac5fb39e8759aeb0abbd5d9480f30fc8b4
 
 PODFILE CHECKSUM: ef19549a9bc3046e7bb7d2fab4d021637c0c58a3
 

circle_app/lib/app/call_out/binding.dart

@@ -0,0 +1,10 @@
+import 'package:get/get.dart';
+
+import 'logic.dart';
+
+class Call_outBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut(() => Call_outLogic());
+  }
+}

circle_app/lib/app/call_out/logic.dart

@@ -0,0 +1,7 @@
+import 'package:get/get.dart';
+
+import 'state.dart';
+
+class Call_outLogic extends GetxController {
+  final Call_outState state = Call_outState();
+}

circle_app/lib/app/call_out/state.dart

@@ -0,0 +1,5 @@
+class Call_outState {
+  Call_outState() {
+    ///Initialize variables
+  }
+}

circle_app/lib/app/call_out/view.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import 'logic.dart';
+
+class Call_outPage extends StatelessWidget {
+  Call_outPage({Key? key}) : super(key: key);
+
+  final logic = Get.find<Call_outLogic>();
+  final state = Get.find<Call_outLogic>().state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}

circle_app/lib/app/circle/logic.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/cupertino.dart';
+import 'package:get/get.dart';
+
+import 'state.dart';
+
+class CircleLogic extends GetxController {
+  PageController pageController = PageController(initialPage: 1,viewportFraction: 0.8
+  );
+  final CircleState state = CircleState();
+}

circle_app/lib/app/circle/state.dart

@@ -0,0 +1,7 @@
+class CircleState {
+  String msg = '';
+  int index = 1;
+  CircleState() {
+    ///Initialize variables
+  }
+}

circle_app/lib/app/circle/view.dart

@@ -0,0 +1,821 @@
+
+
+import 'package:circle_app/util/util.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_swiper/flutter_swiper.dart';
+import 'package:get/get.dart';
+
+import 'logic.dart';
+
+class CirclePage extends StatelessWidget {
+  CirclePage({Key? key}) : super(key: key);
+
+  final logic = Get.put(CircleLogic());
+  final state = Get.find<CircleLogic>().state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        width: MediaQuery.of(context).size.width,
+        height: MediaQuery.of(context).size.height,
+        decoration: BoxDecoration(
+            image: DecorationImage(
+                fit: BoxFit.fill,
+                image: AssetImage(getBaseImage('home_back')))),
+        // child: Image.asset(
+        //   getBaseImage('bg'),
+        //   fit: BoxFit.fill,
+        // ),
+        child: Scaffold(
+          backgroundColor: Colors.transparent,
+          body: SafeArea(
+            child: GetBuilder(builder: (CircleLogic controller) {
+              return Container(
+                child: Column(children: [
+                  navigatorItem(),
+                  Text(controller.state.msg),
+                  //组件使用
+                  Expanded(
+                      child: Swiper(
+                    itemBuilder: (BuildContext context, int index) {
+                      return _getPageByIndex(index);
+                    },
+                    onIndexChanged: (index) {
+                      controller.state.index = index;
+                      controller.update();
+                    },
+                    index: controller.state.index,
+                    itemCount: 3,
+                    viewportFraction: 0.95,
+                    // scale: 0.9,
+                    loop: false,
+                    // pagination: new SwiperPagination(),//如果不填则不显示指示点
+                    // control: new SwiperControl(),//如果不填则不显示左右按钮
+                  ))
+                ]),
+              );
+            }),
+          ),
+        ));
+  }
+
+  navigatorItem() {
+    List<String> urlList = [
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp'
+    ];
+    List<Widget> widgets = [];
+    int index = 0;
+    urlList.forEach((element) {
+      widgets.add(Positioned(
+        left: 15.sp * index,
+        child: circleWidget(element),
+      ));
+      index++;
+    });
+    return Container(
+      width: Get.width,
+      padding: EdgeInsets.only(left: 18.sp, right: 18.sp),
+      height: 44.sp,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Positioned(
+              left: 0,
+              child: Container(
+                width: 30.sp * widgets.length,
+                height: 44.sp,
+                child: Stack(
+                  children: widgets,
+                ),
+              )),
+          ShaderMask(
+            shaderCallback: (Rect bounds) {
+              return const LinearGradient(
+                begin: Alignment(0.0, -1.0),
+                end: Alignment.bottomCenter,
+                colors: [Color(0xff71F3F2), Color(0xffF657FF)],
+              ).createShader(Offset.zero & bounds.size);
+            },
+            child: Text(
+              '发现',
+              style: TextStyle(
+                  fontSize: 18.sp,
+                  fontWeight: FontWeight.w600,
+                  color: Colors.white,
+                  shadows: [
+                    Shadow(color: Color(0xffF657FF), offset: Offset(0.0, -1))
+                  ]),
+            ),
+          ),
+          Positioned(
+              right: 0,
+              child: GestureDetector(
+                child: Image.asset(
+                  getCircleImage('my_circle'),
+                  width: 64.sp,
+                ),
+              )),
+        ],
+      ),
+    );
+  }
+
+  circleWidget(String url, {double width = 30}) {
+    return GestureDetector(
+        child: Stack(
+      alignment: Alignment.center,
+      children: [
+        Image.asset(
+          getCircleImage('avatar_bg'),
+          width: width.sp,
+        ),
+        ClipOval(
+          child: Image.network(
+            url,
+            width: (width - 1).sp,
+            height: (width - 1).sp,
+            fit: BoxFit.fill,
+          ),
+        )
+      ],
+    ));
+  }
+
+  _getPageByIndex(int index) {
+    TextSpan span = TextSpan(
+      text: '查看更多',
+      style: TextStyle(color: Color(0xFFFF4DF6), fontSize: 14.sp),
+    );
+    TextSpan descSpan = TextSpan(
+      text: '圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈',
+      style: TextStyle(color: Colors.white, fontSize: 12.sp),
+    );
+
+    List<String> urlList = [
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp'
+    ];
+    List<Widget> widgets = [];
+    int index = 0;
+    urlList.forEach((element) {
+      widgets.add(Positioned(
+        left: 15.sp * index,
+        child: circleWidget(element),
+      ));
+      index++;
+    });
+    return ClipRRect(
+        borderRadius: BorderRadius.circular(10.sp),
+        child: Container(
+            width: Get.width,
+            margin: EdgeInsets.only(left: index > 0 ? 4.sp : 0, right: 4.sp),
+            child: Stack(
+              children: [
+
+                ClipRRect(
+                    borderRadius: BorderRadius.circular(10.sp),
+                    child: SizedBox(
+                      width: Get.width,
+                      child: Image.asset(
+                        getCircleImage('circle_bg'),
+                        fit: BoxFit.fill,
+                      ),
+                    )),
+                Container(
+                  height: Get.height,
+                  width: Get.width,
+                  margin: EdgeInsets.only(top: 72.sp),
+                  child: ListView.builder(
+                      itemCount: 3,
+                      itemBuilder: (context,index) {
+                        if (index == 0) {
+                          return Container(
+                            padding: EdgeInsets.only(left: 12.sp, right: 12.sp),
+                            height: 72.sp,
+                            decoration: BoxDecoration(
+                                image: DecorationImage(
+                                    fit: BoxFit.fill,
+                                    image:
+                                    AssetImage(getCircleImage('circle_desc')))),
+                            child: Column(
+                              children: [
+                                Container(
+                                  width: Get.width,
+                                  child: RichText(
+                                      overflow: TextOverflow.fade,
+                                      maxLines: 2,
+                                      text: TextSpan(
+                                          children: <InlineSpan>[descSpan, span])),
+                                ),
+                                Container(
+                                  child: Row(
+                                    children: [
+                                      Row(
+                                        children: [
+                                          Container(
+                                            height: 30.sp,
+                                            width: 30.0 + 15 * (widgets.length - 1),
+                                            child: Stack(
+                                              children: widgets,
+                                            ),
+                                          ),
+                                          SizedBox(
+                                            width: 8.sp,
+                                          ),
+                                          Text(
+                                            '3.5万圈友',
+                                            style: TextStyle(
+                                                color: Colors.white, fontSize: 12.sp),
+                                          ),
+                                          SizedBox(
+                                            width: 8.sp,
+                                          ),
+                                          Image.asset(
+                                            getCircleImage('play'),
+                                            width: 20.sp,
+                                          )
+                                        ],
+                                      )
+                                    ],
+                                  ),
+                                ),
+                              ],
+                            ),
+                          );
+                        } else if (index == 1) {
+                          return vipDynamicItem();
+                        } else {
+                          return normalDynamicItem();
+                        }
+                      }),
+                ),
+                ClipRRect(
+            borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(10.sp),
+                topRight: Radius.circular(10.sp)),
+            child: Container(
+              padding: EdgeInsets.only(left: 12.sp, right: 12.sp),
+              height: 72.sp,
+              decoration: BoxDecoration(
+                  image: DecorationImage(
+                      fit: BoxFit.fill,
+                      image: AssetImage(
+                          getCircleImage('top_circle_bg')))),
+              child: Row(
+                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Image.network(
+                    'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+                    width: 42.sp,
+                    height: 42.sp,
+                    fit: BoxFit.fill,
+                  ),
+                  Expanded(
+                      child: Container(
+                        padding:
+                        EdgeInsets.only(left: 8.sp, top: 12.sp),
+                        alignment: Alignment.centerLeft,
+                        height: 72.sp,
+                        child: Column(
+                          children: [
+                            Text(
+                              '圈子名称',
+                              style: TextStyle(
+                                  color: Colors.white,
+                                  fontSize: 18.sp,
+                                  fontWeight: FontWeight.w600),
+                            ),
+                            SizedBox(
+                              height: 4.sp,
+                            ),
+                            Text(
+                              '35.6万人看过',
+                              style: TextStyle(
+                                color: Color(0xff03FEFB),
+                                fontSize: 12.sp,
+                              ),
+                            ),
+                          ],
+                        ),
+                      )),
+                  GestureDetector(
+                    onTap: () {
+                      Get.bottomSheet(tipWdiget(),isScrollControlled:true,enableDrag:false);
+                    },
+                    child: Image.asset(
+                      getCircleImage('add'),
+                      width: 77.sp,
+                    ),
+                  )
+                ],
+              ),
+            )),
+                Positioned(
+                  bottom: 56.sp,
+                    right: 0.sp,
+                    child: GestureDetector(child: Image.asset(getCircleImage('send_msg'),width: 60.sp,)))
+
+              ],
+            )));
+  }
+  ///至尊喊话
+  vipDynamicItem() {
+    Text descText = Text(
+      '圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介圈子介绍圈子介绍圈',
+      style: TextStyle(color: Colors.white, fontSize: 14.sp),
+    );
+
+    List<String> urlList = [
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp'
+    ];
+    List<Widget> widgets = [];
+    int index = 0;
+    urlList.forEach((element) {
+      widgets.add(Positioned(
+        left: 12.sp * index,
+        child: circleWidget(element, width: 24),
+      ));
+      index++;
+    });
+    widgets.add(Positioned(
+        left: 12.sp * urlList.length,
+        child: Image.asset(
+          getCircleImage('more'),
+          width: 24.sp,
+        )));
+    return Container(
+      margin: EdgeInsets.only(top: 10.sp),
+      width: Get.width,
+      height: 279.sp,
+      decoration: BoxDecoration(
+          image: DecorationImage(
+              fit: BoxFit.fill,
+              image: AssetImage(
+                getCircleImage('pic_bg'),
+              ))),
+      child: Stack(
+        children: [
+          Positioned(
+            left: 0,
+            top: 2.sp,
+            child: Image.asset(getCircleImage('vip_say')),
+            height: 18.sp,
+          ),
+          Positioned(
+            right: 2.sp,
+            top: 2.sp,
+            child: Image.asset(getCircleImage('location')),
+            height: 18.sp,
+          ),
+          Container(
+            height: 279.sp,
+            width: Get.width,
+            padding: EdgeInsets.only(top: 12.sp, left: 12.sp, right: 12.sp),
+            child: Column(
+              children: [
+                Container(
+                  height: 72.sp,
+                  child: Row(
+                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      GestureDetector(
+                          child: Stack(
+                        alignment: Alignment.center,
+                        children: [
+                          Image.asset(
+                            getCircleImage('avatar_bg'),
+                            width: 42.sp,
+                          ),
+                          ClipOval(
+                            child: Image.network(
+                              'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+                              width: 40.sp,
+                              height: 40.sp,
+                              fit: BoxFit.fill,
+                            ),
+                          )
+                        ],
+                      )),
+                      Expanded(
+                          child: Container(
+                        padding: EdgeInsets.only(left: 8.sp, top: 12.sp),
+                        alignment: Alignment.centerLeft,
+                        height: 72.sp,
+                        child: Column(
+                          children: [
+                            Row(
+                              children: [
+                                Text(
+                                  '圈子名称',
+                                  style: TextStyle(
+                                      color: Colors.white,
+                                      fontSize: 18.sp,
+                                      fontWeight: FontWeight.w600),
+                                ),
+                                SizedBox(
+                                  width: 8.sp,
+                                ),
+                                Image.asset(
+                                  getCircleImage('vip'),
+                                  width: 36.sp,
+                                )
+                              ],
+                            ),
+                            SizedBox(
+                              height: 4.sp,
+                            ),
+                            Row(
+                              children: [
+                                Container(
+                                  alignment: Alignment.center,
+                                  height: 18.sp,
+                                  padding:
+                                      EdgeInsets.only(left: 6.sp, right: 6.sp),
+                                  decoration: BoxDecoration(
+                                      borderRadius: BorderRadius.circular(9.sp),
+                                      gradient:const LinearGradient(
+                                          begin: Alignment(0.25, 0.5),
+                                          end: Alignment(0.75, 0.5),
+                                          colors: [
+                                            Color(0xff8DFFF8),
+                                            Color(0xffB5D3FF)
+                                          ])),
+                                  child: Text(
+                                    '男.33.DOM.异性恋',
+                                    style: TextStyle(
+                                      color: Colors.black,
+                                      fontSize: 12.sp,
+                                    ),
+                                  ),
+                                )
+                              ],
+                            ),
+                          ],
+                        ),
+                      )),
+                    ],
+                  ),
+                ),
+                Container(
+                  // margin: EdgeInsets.only(top: 4.sp),
+                  child: descText,
+                ),
+                Container(
+                  height: 100.sp,
+                  margin: EdgeInsets.only(top: 5.sp),
+                  child: GridView(
+                    physics: const NeverScrollableScrollPhysics(),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                          crossAxisCount: 3, //横轴三个子widget
+                          crossAxisSpacing: 8.sp,
+                          childAspectRatio: 1.0 //宽高比为1时，子widget
+                          ),
+                      children: <Widget>[
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                            'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                            fit: BoxFit.fill,
+                          ),
+                        ),
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                              'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                              fit: BoxFit.fill),
+                        ),
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                              'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                              fit: BoxFit.fill),
+                        ),
+                      ]),
+                ),
+                Container(
+                  height: 34.sp,
+                  padding: EdgeInsets.only(left: 5.sp,right: 10.sp),
+                  margin: EdgeInsets.only(top: 5.sp),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(17.sp),
+                      gradient: const LinearGradient(
+                          begin: Alignment(0.25, 0.5),
+                          end: Alignment(0.75, 0.5),
+                          colors: [Color(0xff261240), Color(0xff122D40)])),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 24 + 12.sp * widgets.length - 12.sp,
+                        height: 24.sp,
+                        child: Stack(children: widgets),
+                      ),
+                      SizedBox(width: 4.sp,),
+                      Expanded(
+                          child: Text(
+                        '1位圈友已私聊',
+                        style: TextStyle(color: Colors.white, fontSize: 12.sp),
+                      )),
+                      Image.asset(
+                        getCircleImage('chat'),
+                        width: 60.sp,
+                      )
+                    ],
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+  ///普通图文喊话
+  normalDynamicItem() {
+    Text descText = Text(
+      '圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介绍圈子介圈子介绍圈子介绍圈',
+      style: TextStyle(color: Colors.white, fontSize: 14.sp),
+    );
+
+    List<String> urlList = [
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+      'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp'
+    ];
+    List<Widget> widgets = [];
+    int index = 0;
+    urlList.forEach((element) {
+      widgets.add(Positioned(
+        left: 12.sp * index,
+        child: circleWidget(element, width: 24),
+      ));
+      index++;
+    });
+    widgets.add(Positioned(
+        left: 12.sp * urlList.length,
+        child: Image.asset(
+          getCircleImage('more'),
+          width: 24.sp,
+        )));
+    return Container(
+      margin: EdgeInsets.only(top: 10.sp),
+      width: Get.width,
+      height: 279.sp,
+      decoration: BoxDecoration(
+          image: DecorationImage(
+              fit: BoxFit.fill,
+              image: AssetImage(
+                getCircleImage('normal_bg'),
+              ))),
+      child: Stack(
+        children: [
+          Positioned(
+            right: 2.sp,
+            top: 2.sp,
+            child: Image.asset(getCircleImage('location')),
+            height: 18.sp,
+          ),
+          Container(
+            height: 279.sp,
+            width: Get.width,
+            padding: EdgeInsets.only( left: 12.sp, right: 12.sp),
+            child: Column(
+              children: [
+                Container(
+                  height: 72.sp,
+                  child: Row(
+                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      GestureDetector(
+                          child: Stack(
+                            alignment: Alignment.center,
+                            children: [
+                              Image.asset(
+                                getCircleImage('avatar_bg'),
+                                width: 42.sp,
+                              ),
+                              ClipOval(
+                                child: Image.network(
+                                  'https://p3-passport.byteimg.com/img/user-avatar/eb429d4dbb3c246f580a6f7894f2b246~100x100.awebp',
+                                  width: 40.sp,
+                                  height: 40.sp,
+                                  fit: BoxFit.fill,
+                                ),
+                              )
+                            ],
+                          )),
+                      Expanded(
+                          child: Container(
+                            padding: EdgeInsets.only(left: 8.sp, top: 12.sp),
+                            alignment: Alignment.centerLeft,
+                            height: 72.sp,
+                            child: Column(
+                              children: [
+                                Row(
+                                  children: [
+                                    Text(
+                                      '圈子名称',
+                                      style: TextStyle(
+                                          color: Colors.white,
+                                          fontSize: 18.sp,
+                                          fontWeight: FontWeight.w600),
+                                    ),
+                                    SizedBox(
+                                      width: 8.sp,
+                                    ),
+                                    Image.asset(
+                                      getCircleImage('vip'),
+                                      width: 36.sp,
+                                    )
+                                  ],
+                                ),
+                                SizedBox(
+                                  height: 4.sp,
+                                ),
+                                Row(
+                                  children: [
+                                    Container(
+                                      alignment: Alignment.center,
+                                      height: 18.sp,
+                                      padding:
+                                      EdgeInsets.only(left: 6.sp, right: 6.sp),
+                                      decoration: BoxDecoration(
+                                          borderRadius: BorderRadius.circular(9.sp),
+                                          gradient: LinearGradient(
+                                              begin: Alignment(0.25, 0.5),
+                                              end: Alignment(0.75, 0.5),
+                                              colors: [
+                                                Color(0xff8DFFF8),
+                                                Color(0xffB5D3FF)
+                                              ])),
+                                      child: Text(
+                                        '男.33.DOM.异性恋',
+                                        style: TextStyle(
+                                          color: Colors.black,
+                                          fontSize: 12.sp,
+                                        ),
+                                      ),
+                                    )
+                                  ],
+                                ),
+                              ],
+                            ),
+                          )),
+                    ],
+                  ),
+                ),
+                Container(
+                  // margin: EdgeInsets.only(top: 4.sp),
+                  child: descText,
+                ),
+                Container(
+                  height: 100.sp,
+                  margin: EdgeInsets.only(top: 5.sp),
+                  child: GridView(
+                      physics: const NeverScrollableScrollPhysics(),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                          crossAxisCount: 3, //横轴三个子widget
+                          crossAxisSpacing: 8.sp,
+                          childAspectRatio: 1.0 //宽高比为1时，子widget
+                      ),
+                      children: <Widget>[
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                            'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                            fit: BoxFit.fill,
+                          ),
+                        ),
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                              'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                              fit: BoxFit.fill),
+                        ),
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(6.sp),
+                          child: Image.network(
+                              'https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b',
+                              fit: BoxFit.fill),
+                        ),
+                      ]),
+                ),
+                Container(
+                  height: 34.sp,
+                  padding: EdgeInsets.only(left: 5.sp,right: 10.sp),
+                  margin: EdgeInsets.only(top: 5.sp),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(17.sp),
+                      gradient: const LinearGradient(
+                          begin: Alignment(0.25, 0.5),
+                          end: Alignment(0.75, 0.5),
+                          colors: [Color(0xff261240), Color(0xff122D40)])),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 24 + 12.sp * widgets.length - 12.sp,
+                        height: 24.sp,
+                        child: Stack(children: widgets),
+                      ),
+                      SizedBox(width: 4.sp,),
+                      Expanded(
+                          child: Text(
+                            '1位圈友已私聊',
+                            style: TextStyle(color: Colors.white, fontSize: 12.sp),
+                          )),
+                      Image.asset(
+                        getCircleImage('chat'),
+                        width: 60.sp,
+                      )
+                    ],
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  tipWdiget() {
+    return Container(
+      width: Get.width,
+      height: Get.height,
+      child: Center(
+        child: Container(
+          width: 339.sp,
+          height: 330.sp,
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              fit: BoxFit.fill,
+              image: AssetImage(getCircleImage('add_tip_bg'))
+            )
+          ),
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Positioned(
+                top: 5.sp,
+                right: 12.sp,
+                  child: GestureDetector(
+                    onTap: () {
+                      Get.back();
+                    },
+                child: Image.asset(getCircleImage('close'),width: 24.sp,),
+              )),
+              Positioned(
+                top: 24.sp,
+                  child: Text('解锁圈子才能主动私聊',style: TextStyle(color: Colors.white,fontSize: 16.sp),)),
+          Positioned(
+            left: 17.sp,
+            top: 64.sp,
+            child: Text('为什么要解锁圈子?',style: TextStyle(color: Colors.white,fontSize: 16.sp),)),
+          Positioned(
+            top: 98.sp,
+            child:Container(
+              width: 339.sp,
+                padding: EdgeInsets.only(left: 17.sp,right: 17.sp),
+                child: Text('为打造纯净的社交环境，更好地服务大家，基于以下几方面考虑:1、平台升级为全天24小时人工审核，保证用户真实，避免骗子、酒托、虚假人士等扰乱平台 ;2、杜绝未入圈用户随意骚扰或影响已入圈的跨友;3、谢绝只会白嫖的猎奇人士。',style: TextStyle(color:Color.fromRGBO(247, 250, 250, 0.8),fontSize: 12.sp)),
+              )),
+              Positioned(
+                bottom: 18.sp,
+                  child: Container(
+                width: 168.sp,
+                height: 42.sp,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(21.sp),
+                    gradient: const LinearGradient(
+                        begin: Alignment.centerLeft,
+                        end:Alignment.centerRight,
+                        colors: [Color(0xff0AFCFF),Color(0xffD739EA)]
+                    )
+                ),
+                child: Text('立即解锁',style: TextStyle(color: Colors.white,fontSize: 16.sp),),
+              )),
+              Positioned(
+                bottom: 72.sp,
+                  child: Container(
+                child: Row(
+                  children: [
+                    Text('￥18',style: TextStyle(color: Color(0xffE845FF),fontSize: 16.sp,fontWeight: FontWeight.w600),),
+                    SizedBox(width: 2.sp,),
+                    Text('(原价60)',style: TextStyle(color: Colors.white70,fontSize: 16.sp,fontWeight: FontWeight.w400,decoration: TextDecoration.lineThrough,
+                      decorationColor: Colors.white70,),),
+                  ],
+                ),
+              ))
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+

circle_app/lib/app/home/logic.dart

@@ -8,7 +8,7 @@ import 'state.dart';
 class HomeLogic extends GetxController {
 
 
-  int currentIndex = 0;
+  int currentIndex = 1;
   Widget currentPage = Container(color: Colors.red,);
 
   final HomeState state = HomeState();

circle_app/lib/app/home/view.dart

@@ -1,4 +1,8 @@
+
 import 'package:circle_app/app/minefragment/view.dart';
+import 'package:circle_app/app/circle/view.dart';
+import 'package:circle_app/app/msg/view.dart';
+import 'package:circle_app/router/app_routers.dart';
 import 'package:circle_app/util/util.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
@@ -14,9 +18,9 @@ class HomePage extends StatelessWidget {
   final state = Get.find<HomeLogic>().state;
 
   final List _tabs = [
-    Container(),
+    MsgPage(),
-    Container(),
+    CirclePage(),
-    MinefragmentPage(),
+MinefragmentPage(),
   ];
 
   @override
@@ -33,6 +37,12 @@ class HomePage extends StatelessWidget {
               width: Get.width,
               // color: Colors.red,
               padding: EdgeInsets.only(left: 50.sp,right: 50.sp,top: 8.sp),
+              decoration: BoxDecoration(
+                image:DecorationImage(
+                  fit: BoxFit.fill,
+                  image: AssetImage(getTabbarImage('tabbar_bg'),)
+                )
+              ),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 crossAxisAlignment: CrossAxisAlignment.start,

circle_app/lib/app/msg/binding.dart

@@ -0,0 +1,10 @@
+import 'package:get/get.dart';
+
+import 'logic.dart';
+
+class MsgBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut(() => MsgLogic());
+  }
+}

circle_app/lib/app/msg/logic.dart

@@ -0,0 +1,7 @@
+import 'package:get/get.dart';
+
+import 'state.dart';
+
+class MsgLogic extends GetxController {
+  final MsgState state = MsgState();
+}

circle_app/lib/app/msg/state.dart

@@ -0,0 +1,6 @@
+class MsgState {
+  String msg = '';
+  MsgState() {
+    ///Initialize variables
+  }
+}

circle_app/lib/app/msg/view.dart

@@ -0,0 +1,179 @@
+import 'package:circle_app/util/util.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
+
+import 'logic.dart';
+
+class MsgPage extends StatelessWidget {
+  MsgPage({Key? key}) : super(key: key);
+
+  final logic = Get.put(MsgLogic());
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        width: MediaQuery.of(context).size.width,
+        height: MediaQuery.of(context).size.height,
+        decoration: BoxDecoration(
+            image: DecorationImage(
+                fit: BoxFit.fill,
+                image: AssetImage(getBaseImage('home_back')))),
+        // child: Image.asset(
+        //   getBaseImage('bg'),
+        //   fit: BoxFit.fill,
+        // ),
+        child: Scaffold(
+          backgroundColor: Colors.transparent,
+          body: SafeArea(
+            child:GetBuilder(builder: (MsgLogic controller) {
+              return  Container(
+                child: Column(
+                  children: [
+                    navigatorItem(),
+                    tipWidget(),
+                    reconmandWidget(),
+                    Text(controller.state.msg)
+                  ],
+                ),
+              );
+            }),
+          ),
+        ));
+  }
+
+  navigatorItem() {
+    return Container(
+      width: Get.width,
+      padding: EdgeInsets.only(left: 18.sp, right: 18.sp),
+      height: 44.sp,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Positioned(
+              left: 0,
+              child: GestureDetector(
+                child: Image.asset(
+                  getMsgImage('msg_love'),
+                  width: 30.sp,
+                ),
+              )),
+          ShaderMask(
+            shaderCallback: (Rect bounds) {
+              return const LinearGradient(
+                begin: Alignment(0.0, -1.0),
+                end: Alignment.bottomCenter,
+                colors: [Color(0xff71F3F2), Color(0xffF657FF)],
+              ).createShader(Offset.zero & bounds.size);
+            },
+            child: Text(
+              '消息',
+              style: TextStyle(
+                  fontSize: 18.sp,
+                  fontWeight: FontWeight.w600,
+                  color: Colors.white,
+                  shadows: [
+                    Shadow(color: Color(0xffF657FF), offset: Offset(0.0, -1))
+                  ]),
+            ),
+          ),
+          Positioned(
+              right: 0,
+              child: GestureDetector(
+                child: Image.asset(
+                  getMsgImage('msg_pipei'),
+                  width: 85.sp,
+                ),
+              )),
+        ],
+      ),
+    );
+  }
+  tipWidget() {
+    return Container(
+      margin: EdgeInsets.only(top: 18.sp,bottom: 15.sp),
+      padding: EdgeInsets.only(left: 16.sp,right: 18.sp),
+      width: Get.width,
+      height: 20,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text('想要聊天的圈友',style: TextStyle(color: Colors.white,fontSize: 16.sp,fontWeight: FontWeight.w500),),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              ShaderMask(
+                shaderCallback: (Rect bounds) {
+                  return const LinearGradient(
+                    begin:Alignment.centerRight,
+                    end: Alignment.centerLeft,
+                    colors: [Color(0xff71F3F2), Color(0xffF657FF)],
+                  ).createShader(Offset.zero & bounds.size);
+                },
+                child:Text(
+                  'n人等您聊',
+                  style: TextStyle(fontSize: 16.sp,fontWeight: FontWeight.w600,color: Colors.white),
+                ),
+              ),
+              Image.asset(getMsgImage('msg_arr'),width: 24.sp,)
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+  reconmandWidget() {
+    return Container(
+      padding: EdgeInsets.only(left: 16.sp,right: 18.sp),
+      width: Get.width,
+      child: Row(
+        children: [
+          Container(
+            child: Column(
+              children: [
+                Image.asset(getMsgImage('msg_first'), width: 50.sp,),
+                SizedBox(height: 4.sp,),
+                Text('抢占第一',
+                  style: TextStyle(color: Colors.white, fontSize: 12.sp),),
+
+              ],
+            ),
+          ),
+          Expanded(child:  SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child:Container(
+              // width: 50.sp * 10,
+            child: Row(
+                children: [
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                  peopleWidget(),
+                ],
+              ),
+            ),
+          ))
+        ],
+      ),
+    );
+  }
+    peopleWidget() {
+      return Container(
+        margin: EdgeInsets.only(left: 18.sp),
+        child: Column(
+          children: [
+            Image.asset(getMsgImage('msg_first'),width: 50.sp,),
+            SizedBox(height: 4.sp,),
+            Text('抢占第一',style: TextStyle(color: Colors.white,fontSize: 12.sp),),
+          ],
+        ),
+      );
+    }
+
+}

circle_app/lib/common/values/values.dart

@@ -7,6 +7,7 @@ abstract class Values {
   static const String home_images = 'assets/images/home/';
   static const String mine_images = 'assets/images/mine/';
   static const String msg_images = 'assets/images/msg/';
+  static const String circle_images = 'assets/images/circle/';
 
 
 }

circle_app/lib/util/util.dart

@@ -37,6 +37,12 @@ String getTabbarImage(String image) {
   return '${Values.tabbar_images}${image}.png';
 }
 
+String getCircleImage(String image) {
+  return '${Values.circle_images}${image}.png';
+}
+
+
+
 ///弹窗文本提示 msg: 提示内容
 showToast(String msg) {
   Fluttertoast.showToast(

circle_app/linux/flutter/generated_plugin_registrant.cc

@@ -7,9 +7,13 @@
 #include "generated_plugin_registrant.h"
 
 #include <file_selector_linux/file_selector_plugin.h>
+#include <url_launcher_linux/url_launcher_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) file_selector_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "FileSelectorPlugin");
   file_selector_plugin_register_with_registrar(file_selector_linux_registrar);
+  g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
+  url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
 }

circle_app/linux/flutter/generated_plugins.cmake

@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   file_selector_linux
+  url_launcher_linux
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

circle_app/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,7 +6,13 @@ import FlutterMacOS
 import Foundation
 
 import file_selector_macos
+import path_provider_foundation
+import sqflite
+import url_launcher_macos
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   FileSelectorPlugin.register(with: registry.registrar(forPlugin: "FileSelectorPlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
+  UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
 }

circle_app/pubspec.yaml

@@ -45,6 +45,7 @@ dependencies:
   url_launcher: ^6.0.0
   # 下拉刷新
   pull_to_refresh: ^2.0.0
+  flutter_swiper: ^1.1.6
 
 dev_dependencies:
   flutter_test:
@@ -77,6 +78,8 @@ flutter:
     - assets/images/navigator/
     - assets/images/tabbar/
     - assets/images/mine/
+    - assets/images/msg/
+    - assets/images/circle/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see

circle_app/windows/flutter/generated_plugin_registrant.cc

@@ -7,8 +7,11 @@
 #include "generated_plugin_registrant.h"
 
 #include <file_selector_windows/file_selector_windows.h>
+#include <url_launcher_windows/url_launcher_windows.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
   FileSelectorWindowsRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("FileSelectorWindows"));
+  UrlLauncherWindowsRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("UrlLauncherWindows"));
 }

circle_app/windows/flutter/generated_plugins.cmake

@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   file_selector_windows
+  url_launcher_windows
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST