关于 – Neu Clone

neu_clone 是一个 100% 免费的 Flutter 开源极简 Tata Neu 克隆项目，仅用于教育目的，使用 Flutter SDK 构建。

抢先看（右 – 克隆）

截图集 1

截图集 2

入门

克隆仓库

https://github.com/Roopeshlr/neu_clone.git

通过运行以下命令获取所有 pub 包

flutter pub get

从 main.dart 运行项目

为了帮助您开始使用 Flutter，请查看在线 文档。

实现思路？

Neu Clone 的主页是小部件列表，可以通过空中更新，它提供了通过仅更新可以托管或从服务器获取的 json 来添加或删除小部件的灵活性。

我们将在下一个块中了解小部件的类型。

小部件类型

✅   carousal 在 widgetProperties 中包含 widgetProperties 列表的基础上，通过 streambuilder 添加带有指示器的 widget 轮播图

{  
  "widgetKey": "widget_key1",  
  "widgetName": "carousal",  
  "widgetProperties": [  
    {  
      "title": "",  
  "subtitle": "",  
  "imageUrl": "https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  },  
  {  
      "title": "",  
  "subtitle": "",  
  "imageUrl": "https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  },  

  ]  
}

✅   carousal_without_ind 在 widgetProperties 中包含 widgetProperties 列表的基础上，通过 streambuilder 添加不带指示器的 widget 轮播图

✅   grid_1,grid_2,grid_3,grid_4 在 widgetProperties 中包含 widgetProperties 列表的基础上，根据设计添加带有图片/文本/背景的 widget 网格。

{  
  "widgetKey": "widget_key5",  
  "widgetName": "grid_2",  
  "widgetProperties": [  
    {  
      "title": "Grocery",  
  "subtitle": "",  
  "imageUrl": "https://tatadigital-dev.adobecqms.net/content/dam/tcp-pwa/starbucks.png",  
  "bgUrl": "https://tatadigital-dev.adobecqms.net/content/dam/tcp-pwa/icons/Flight-2.png",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  },   
  ]  
}

✅   horizontal_scroll_1 在 widgetProperties 中包含 widgetProperties 列表的基础上，根据设计添加带有图片/文本/背景的 widget 水平列表视图。

{  
  "widgetKey": "widget_key5",  
  "widgetName": "horizontal_scroll_1",  
  "widgetProperties": [  
    {  
      "title": "Grocery",  
  "subtitle": "",  
  "imageUrl": "https://tatadigital-dev.adobecqms.net/content/dam/tcp-pwa/starbucks.png",  
  "bgUrl": "https://tatadigital-dev.adobecqms.net/content/dam/tcp-pwa/icons/Flight-2.png",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  },   
  ]  
}

✅   headline headline 小部件类型添加设计中的 Headline 和 subHeading。

 {  
      "widgetKey": "widget_key676",  
  "widgetName": "headline",  
  "widgetProperties": [  
        {  
          "title": "Entertainment Store",  
  "subtitle": "+5 % cashback",  
  "imageUrl": "https://i.ibb.co/KF1YPpN/Screenshot-2022-08-02-at-8-58-12-PM.png",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  }

✅   banner 使用 imageUrl 作为网络图片并带有内边距，为首页添加横幅。

{  
      "widgetKey": "widget_key3",  
  "widgetName": "banner_1",  
  "widgetProperties": [  
        {  
          "title": "banner",  
  "subtitle": "",  
  "imageUrl": "https://i.ibb.co/JnVPP5d/IMG-ABFAB27-D740-E-1.jpg",  
  "ctaType": "webview",  
  "ctaPath": "https://www.google.com/"  
  }

✅   footer 使用 imageUrl 作为网络图片，为首页添加页脚。

{  
      "widgetKey": "widget_key3",  
  "widgetName": "footer",  
  "widgetProperties": [  
        {  
          "title": "banner",  
  "subtitle": "",  
  "imageUrl": "https://i.ibb.co/JnVPP5d/IMG-ABFAB27-D740-E-1.jpg",  
  "ctaType": "",  
  "ctaPath": ""  
  }

导航和深度链接功能

目前项目仅支持导航到深度链接和 Webview，可以通过更改 widget 属性中的 cta 类型和路径来更新。

"widgetProperties": [  
        {  
          "title": "Relaxing Stays like Home",  
  "subtitle": "Fruits and vegies",  
  "imageUrl": "https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80",  
  "bgUrl": "https://tatadigital-dev.adobecqms.net/content/dam/tcp-pwa/icons/Flight-2.png",  
  "ctaType": "webview",  //deeplink - to use as deeplink 
  "ctaPath": "https://www.google.com/"  
  }
  ]

测试小部件

目前在 widget_test.dart 中编写了三个测试用例。

  1. 测试 grid_1 类型小部件文本 此测试从 json 获取输入，并通过动态分配在 json 中的 keyID 来检查 grid 1 类型小部件是否已完美渲染。
"widgetKey": "widget_key4",
  1. 测试带 key ID 的动态 headline 小部件此测试从 json 获取输入，并通过动态分配在 json 中的 keyID 来检查小部件是否已完美渲染，同时确保滚动已完成。

await tester.dragUntilVisible(find.byKey(const ValueKey('widget_key6')),  
  find.byKey(const ValueKey('parent_list_view')), Offset(0, -654));
  1. 测试带文本的动态 headline 小部件此测试从 json 获取输入，并通过动态分配在 json 中的 keyID 来检查 headline 小部件是否已完美渲染，同时确保滚动已完成。

await tester.dragUntilVisible(find.text(getFirstWidgetString()),  
  find.byKey(const ValueKey('parent_list_view')), Offset(0, -500));

使用以下命令运行测试用例

flutter test test/widget_test.dart

贡献

Neu Clone 是 **100% 免费**且**开源**的。我们鼓励并支持一个活跃、健康的社区，该社区接受来自公众（包括您）的贡献。

  • 修复 bug

  • 如果您是开发者，请随意查看源代码并提交 pull requests。

  • 请不要忘记**点赞**、**关注**并**点亮我们的仓库**！

当前开放任务（每周更新）

  1. 将所有基于字符串的 switch 语句转换为 enum。
  2. 将 Image.network 提供程序更改为缓存过程/Shimmer（您的创造力）。
  3. 添加更多测试用例
  4. 添加搜索功能

项目创建与维护者

Roopesh L R

高级 Flutter 开发者，Bounce，前 Byjus

演示应用

屏幕录制

版权与许可

此克隆项目无意用于任何非法使用 Tata 集团资源，无论何时或以何种方式。仅用于教育目的。

GitHub

查看 Github