页面展示

页面中很多地方有仿照别人做的app页面来做，毕竟不是专业设计，很难费脑子去想该怎样布局，所以APP中也有很多自己想的页面很难看

目的

算是一个flutter的入门学习，边百度边做，中间也遇到很多问题

涉及到的技术点

• 网络请求：使用Dio，包含wanandroid的cookies持久化存储
• flutter中一些控件的api使用
• 全局状态管理：provider
• json与数据model的转换：json_serializable
• 资源图片字体的引用
• 自定义widget
  github地址:https://github.com/elitetyc/wanandroid_client_app
  已有博客地址:

  • 1.Flutter开发玩安卓app-项目简介

  • 2.Flutter开发玩安卓app-项目基础搭建

登录页面

登录页面是按照简书APP的账号密码登录页面来做的

主页

主页头像是使用一个开放接口获取，因为当前玩安卓接口返回的数据中没有图片，所以加了一个，希望界面不要那么简洁

体系页面

导航页面

项目分类

项目分类

i公众号

项目分类

我的

项目详情

附：贴上一个完整的pubspec.yaml文件，因为后面只讲到该填加什么依赖，没有完整的

name: wanandroid_client_app
description: 玩安卓客户端

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  #    json生成model需要的依赖
  json_annotation: ^2.0.0
  #  数据管理层
  provider: 3.0.0+1
  #  网络请求
  dio: ^3.0.0
  dio_cookie_manager: 1.0.0
#  cookies临时存储，项目中未用到
  cookie_jar: ^1.0.0
  path_provider: ^1.3.0
#  toast
  fluttertoast: ^3.1.3
  flutter_swiper : ^1.1.6
  webview_flutter: ^0.3.14+1
  flutter_webview_plugin: ^0.3.8
  flutter_staggered_grid_view: ^0.3.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  #    json生成model需要的依赖
  build_runner: ^1.0.0
  json_serializable: ^2.0.0
  json_model: ^0.0.2
  shared_preferences: ^0.5.3


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  fonts:
    - family: Login
      fonts:
        - asset: fonts/login.ttf
    - family: Main
      fonts:
        - asset: fonts/main.ttf
    - family: Article
      fonts:
        - asset: fonts/article.ttf
    - family: Mine
      fonts:
        - asset: fonts/mine.ttf
  assets:
    - imgs/type0.jpeg
    - imgs/type1.jpeg