flutter 学习整理

flutter

  • 推荐使用 vscode 进行开发 ,下载一下插件,很好用

  • flutter 的状态管理 有很多:开源的代表有:flutter_redux, google的BLoc,scoped_model等,及闲鱼的fish-redux,但是我们现在都没用 暂时只用自带的setState来更新数据

  • flutter学习资源列表:
    http://www.devio.org/2018/09/09/awesome-flutter/

  • https://pub.dev/ 这是插件地址,需要用到哪些功能的插件可以在这上面找, 基本都开源的 可以直接看源码

  • 编译打包:

    1
    2
    编译打包安卓工程:命令行运行  flutter build apk
    编译打包ios工程:命令行运行 flutter build ios --release,然后进入ios工程进行archive
  • 遇到的一些问题:

    1
    2
    3
    4
    Container 中color属性不能和 decoration同时存在 会报错
    padding和margin的值不能为负
    listview 暂时没找到直接滚动到某个cell的方法
    有些组件必须要在Material组件中才能使用(如果使用CupertinoPageScaffold要注意,Scaffold不会有问题)
  • 常用的一些Widget :

  1. iOS风格 Widget import 'package:flutter/cupertino.dart';
  2. SafeArea 安全区域:比如iphone X 会有一个安全区域,SafeArea,让内容显示在安全的可见区域,可以避免一些屏幕有刘海或者凹槽的问题
  3. Container:相当于一个空白的view,可以设置padding和margin布局,可以设置阴影、圆角、边框、样式(decoration)等等,可以在里面放child
  4. Row/Column(Flexible、Expanded),Stack,ListView,GridView,GestureDetector(手势),Align,Text,Image,TextField(输入框),FlatButton(还有其他样式的button),Offstage(该Widget可根据条件来控制是否显示),BottomNavigationBar,ClipOval,SizedBox,IgnorePointer,ConstrainedBox等
  • 获取设备屏幕相关的一些信息
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 设备方向 (portrait, landscape)
    Orientation getDeviceOrientation(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.orientation;
    }

    // 屏幕宽度
    double screenWidth(BuildContext context) {
    return MediaQuery.of(context).size.width;
    }

    // 屏幕高度
    double screenHeight(BuildContext context) {
    return MediaQuery.of(context).size.height;
    }

    // 状态栏高度
    double statusBarHeight(BuildContext context) {
    return MediaQuery.of(context).padding.top;
    }

    // 导航栏高度
    double navBarHeight() {
    return 44.0;
    }

    // 状态栏+导航栏高度
    double statusAndNavBarHeight(BuildContext context) {
    return statusBarHeight(context) + navBarHeight();
    }
  • 这是我们现在这个工程用到的一些插件:(安卓编译的时候要注意AndroidX的问题 ,如果项目不支持需要做处理:1.android项目升级到AndroidX 2.将用到的插件做降级处理(我们现在是这么处理的),现在我们用到的这些插件版本没注释的,都是可以正常编译的,注释掉的有些不行)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    # iOS 风格的图标
    cupertino_icons: ^0.1.2
    # 提示
    fluttertoast: ^3.0.1
    # web socket
    web_socket_channel: ^1.0.9
    # 网络相关
    http: ^0.12.0+1
    dio: ^2.1.0
    connectivity: ^0.4.2
    # 存储相关
    shared_preferences: ^0.5.1+1
    sqflite: ^1.1.3
    # 图片/相册相关
    image_picker: ^0.4.12+1
    image_picker_saver: ^0.1.0
    image_cropper: ^0.0.9
    photo_manager: ^0.2.0
    # 图片压缩
    flutter_image_compress: ^0.3.1
    # 网络图片缓存
    cached_network_image: ^0.7.0
    transparent_image: ^1.0.0
    # 路径相关
    path_provider: ^0.5.0+1
    # 路由导航相关
    fluro: ^1.4.0
    # webview插件
    flutter_webview_plugin: ^0.2.1+2
    # 轮播图
    flutter_swiper: ^1.1.6
    # 选择器
    flutter_picker: ^1.0.9
    city_pickers: ^0.1.14
    # 通知
    event_bus: ^1.1.0
    # 二维码生成和扫描
    barcode_scan: ^0.0.8
    qr_flutter: ^2.0.0+51
    # cell侧滑
    flutter_slidable: ^0.4.9
    # 汉字转拼音
    lpinyin: ^1.0.7
    # 索引列表
    azlistview: ^0.1.1
    # 长按菜单
    menu: ^0.1.3
    # 请求权限 1.0.1
    permission_handler: ^1.0.1
    # 缓存管理
    flutter_cache_manager: ^0.3.2
    # 极光推送插件
    jpush_flutter: ^0.0.11
    # 双向进度条
    flutter_range_slider: ^1.1.0
    # 图表相关
    circle_wheel_scroll: ^0.0.1+1
    charts_flutter: ^0.6.0
    # 录音
    flutter_sound: ^1.4.0
    # 其他
    tuple: ^1.0.1
    # 未使用
    # intl: ^0.15.0
    # flutter_localizations:
    # sdk: flutter
    # flutter_i18n: ^0.6.2
    # flutter_section_table_view: ^1.0.3
    # url_launcher: ^5.0.2
    # 获取设备信息
    # device_info: ^0.4.0+1
    # 日历相关
    # flutter_calendar: ^0.0.8
    # flutter_umeng_analytics_fork: ^0.0.3
    # flutter_wechat: ^0.1.5
    # flutter_alipay: ^0.1.0
    # flutter_cupertino_date_picker: ^0.3.0
    # flutter_local_notifications: ^0.5.2
    # qrcode_reader: ^0.4.4
    # photo: ^0.2.0
    # photo_view: ^0.2.2
    # bottom_tab_bar:
    # git: https://github.com/LiuC520/flutter_bottom_tab_bar.git
    # firebase_database: ^2.0.2
    # 相机
    # camera: ^0.4.3+2
    # 图片下载
    # image_downloader 0.14.1
    # bloc
    # flutter_bloc: ^0.10.1
    # waveprogressbar_flutter: "^0.1.1"
    # flutter_circular_chart: ^0.1.0
    # 地图
    # flutter_map: ^0.5.0+1
    # amap_base: ^0.3.5
    # amap_base:
    # git:
    # url: https://github.com/yohom/amap_base_flutter.git
    # ref: android-support-library
    # path: base
    # amap_base_location:
    # git:
    # url: https://github.com/yohom/amap_base_flutter.git
    # ref: android-support-library
    # path: location
    # 定位
    amap_location: ^0.2.0
    # location: ^2.0.0
    # amap_base_search:
    # git:
    # url: https://github.com/yohom/amap_base_flutter.git
    # ref: android-support-library
    # path: search
    # wifi 信息获取
    # wifi: ^0.1.5
    # get_ip: ^0.3.0
    # ios_network_info: ^0.1.2
    # wifi_ip: ^0.0.1
    # wifi_ip:
    # git:
    # url: https://github.com/luanvotrongdev/get_wifi_info.git
    # flutter_circular_chart: ^0.1.0
    # 折线图
    # flutter_sparkline: ^0.1.0
作者

吃饭不加糖

发布于

2021-03-26

更新于

2021-03-26

许可协议

评论