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

红太狼 2021-10-01 10:42 441阅读 0赞

# 页面展示 #

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

###### 目的 ######

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

###### 涉及到的技术点 ######

*  网络请求：使用Dio，包含wanandroid的cookies持久化存储
 *  flutter中一些控件的api使用
 *  全局状态管理：provider
 *  json与数据model的转换：json\_serializable
 *  资源图片字体的引用
 *  自定义widget  
    **github地址:**[https://github.com/elitetyc/wanandroid\_client\_app][https_github.com_elitetyc_wanandroid_client_app]  
    **已有博客地址:**
    
     *  [1.Flutter开发玩安卓app-项目简介][1.Flutter_app-]
     *  [2.Flutter开发玩安卓app-项目基础搭建][2.Flutter_app-]

![11172442-9d021c44db6430e1.png][]

登录页面

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

![11172442-957d8bdc66c09010.png][]

主页

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

![11172442-ce790d4a29e64128.png][]

体系页面

![11172442-91b1cba973928b01.png][]

导航页面

体系与导航页面是仿照之前一个仿网易云实现的玩安卓客户端的界面来的

![11172442-b99818b9b31ee122.png][]

项目分类

![11172442-a2c1135bf181a68f.png][]

项目分类

![11172442-b4b174970f5a806b.png][]

i公众号

项目分类

![11172442-cb80d3ce772eb209.png][]

我的

我的页面主要实现了退出登录，和界面主题切换

![11172442-da8221996ecafc67.png][]

项目详情

### 附：贴上一个完整的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

[https_github.com_elitetyc_wanandroid_client_app]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Felitetyc%2Fwanandroid_client_app
[1.Flutter_app-]: https://www.jianshu.com/p/ce19d53948dd
[2.Flutter_app-]: https://www.jianshu.com/p/534784d22e17
[11172442-9d021c44db6430e1.png]: /images/20210825/d021e47b7c5e470f9a1ce49e6490971f.png
[11172442-957d8bdc66c09010.png]: /images/20210825/f020027e2110411e9996d1777788db46.png
[11172442-ce790d4a29e64128.png]: /images/20210825/60d76c6136d943aca1040f0b7f5de645.png
[11172442-91b1cba973928b01.png]: /images/20210825/e5f1c01dc03448579fbee8af0415eb64.png
[11172442-b99818b9b31ee122.png]: /images/20210825/fe39766fede94012808ddbf522723797.png
[11172442-a2c1135bf181a68f.png]: /images/20210825/35bf3d83bc1b4c8a9195c1f4aaddc251.png
[11172442-b4b174970f5a806b.png]: /images/20210825/ed7dcdcc742145158d9db91b441d443e.png
[11172442-cb80d3ce772eb209.png]: /images/20210825/52a5456b646d481e9cd924f2d40b6748.png
[11172442-da8221996ecafc67.png]: /images/20210825/c4ba0e04ff2e4b3a8b03609bec4bd1cf.png