Flutter-02编译器选择

1打开 VS Code。

2打开 查看 > 命令面板…。

3输入 “install”，然后选择 扩展: 安装扩展(就是点击选择第一行内容)。

4在扩展搜索输入框中输入 “flutter”，然后在列表中选择 Flutter 并单击 安装。此过程中会自动安装必需的 Dart 插件。（选择第一行并安装）

5退出然后重新启动 VS Code。

1打开 查看 > 命令面板…。

2输入 “doctor”，选择 Flutter: Run Flutter Doctor。

3打开 输出 (OUTPUT) 面板查看是否有错误，确保在不同的输出选项 (Output Options) 的下拉列表中选择了 Flutter。

我们在上篇文章已经用命令行创建了一个 my_app 的flutter项目了，这里我们就可以使用 vscode 打开看看了

创建新项目 ，则是在命令面板输 flutter , 选择 Flutter: New Application Project

运行项目 ，找到 VS Code 的状态栏(窗口底部蓝色的条)

1打开 Android Studio。

2打开插件设置（在 v3630 以上的系统打开 Configure > Plugins）。

这里需要先改一下网络请求的设置

3然后搜索Flutter 插件，选择并点击 安装。

4当d出安装 Dart 插件提示时，点击 Yes。

5退出重新启动编译器，然后在编译器主页面就可以看到多了了 create new flutter project 可供选择，代表flutter插件安装成功，我们试着点击来创建一个新项目。

1、点击输入flutter框d出软键盘时，遮挡本输入框一部分。

2、点击输入框，输入框跟随软键盘自动上移时其他不该移动的内容也跟随上移导致的flutter键盘d出时listview置底。

Tags： flutter

[TOC]

容器组件Container包含一个子widget，自身具备alignment、padding等属性，方便布局过程中摆放child。

常用属性

组件Image显示图像的组件，有多种构造函数：

常用属性

BoxFit取值及描述

文本组件Text负责显示文本和定义显示样式。

常用属性

富文本组件RichText使用多个不同风格的widget显示文本，要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能多行，也可能显示在同一行，取决于布局约束。

常用属性

图标组件Icon展示图标的组件，该组件不可交互，要实现交互图标，可以考虑使用IconButton组件。图标相关组件有以下几个：

图标按钮组件IconButton是基于Meterial Design风格的组件，可以响应按下的事件，并且按下时带水波纹效果。如果它的onPressed回调函数为null，那么这个按钮处于禁用状态，并且不可按下。

凸起按钮组件RaisedButton是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸效果。

列表是最常见的需求。在Flutter中，用ListView来显示列表项，支持垂直和水平方向展示，通过一个属性我们就可以控制其方向，列表有以下几类：

基础列表组件为ListView组件。

水平列表组件即为水平方向排列的组件，列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axishorizontal即可。

当列表的数据项非常多时，需要使用长列表，比如淘宝后台订单列表、手机通讯录等，这些列表项数据很多。长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。

网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式：

表单是一个包含表单元素的区域。表单元素允许用户输入内容，比如文本域，下拉列表，单选框，复选框等。常见应用场景有：登录、注册、输入信息等。表单里有两个重要的组件，一个是Form组件，用来左整个表单提交使用的；另一个是TextFormField组件，用来做用户输入的。

#d窗

oktoast : ^315

#路由

get : ^451

#百度地图定位

flutter_bmflocation : ^200-nullsafety1

#百度地图-基础地图

flutter_baidu_mapapi_map : ^300+2

#百度地图-检索

flutter_baidu_mapapi_search : ^300

#百度地图-计算工具

flutter_baidu_mapapi_utils : ^300

#屏幕自动适应

flutter_screenutil : ^520

#Banner图切换

flutter_swiper_plus : ^204

#网络请求

dio : ^404

dio_cache_interceptor : ^322

pretty_dio_logger : ^120-beta-1

#城市选择器

azlistview : ^200

#本地存储

get_storage : ^203

#权限

permission_handler : ^830

#保存

image_gallery_saver : ^171

# image_save: ^500

#常用工具类

common_utils :

path : plugin/common_utils-202

#选择器

flutter_picker : ^202

#生成二维码

qr_flutter : ^400

#验证码输入框

pin_input_text_field : ^411

# 汉字转拼音

lpinyin : ^203

#多张上传

wechat_assets_picker : ^631

wechat_camera_picker : ^263

#裁剪

image_cropper : ^150

#压缩

flutter_luban : ^0113

#家谱树

graphview : ^111

vector_math : ^210

#行为验证码

steel_crypt : ^300+1

encrypt : ^500

#二维码识别

flutter_qr_reader : ^105

#右上角小图标

badges : ^202

#唤醒系统应用

url_launcher : ^6017

flutter_sms : ^232

#QQ分享

tencent_kit : ^210

flutter_cache_manager : ^330

#微信SDK

fluwx : ^361+4

#支付宝SDK

tobias :

path : plugin/tobias-220

#个推

getuiflut : ^0211

#极光推送

# jpush_flutter:

# path: plugin/jpush_flutter-222

#极光魔链

jmlink_flutter_plugin :

path : plugin/jmlink_flutter_plugin-212

#极光认证

jverify :

path : plugin/jverify-224

#极光统计

janalytics :

path : plugin/janalytics-215

#倒计时

circular_countdown_timer : ^020

#加载中效果

flutter_spinkit : ^510

#APP更新

r_upgrade :

path : plugin/r_upgrade-037+2

#刷新-加载更多

flutter_easyrefresh : ^221

#右上角d出式菜单

custom_pop_up_menu : ^122

#时间轴

timeline_tile : ^200

#虚线边框

dotted_border : ^200

like_button : ^204

#

extended_image : ^601

#九宫格

nine_grid_view : ^200

#时间模糊插件

timeago :

path : plugin/timeago-310

#屏幕截图

screenshot : ^123

#压缩

flutter_image_compress : ^110

#List左滑右滑

flutter_slidable : ^120

#底部伸缩抽屉-针对地图

sliding_up_panel : ^200+1

#键盘高度

flutter_keyboard_size : ^100+4

#JSON动图

lottie : ^122

#城市选择器

city_pickers :

path : plugin/city_pickers-101

#调试工具

path_provider : ^207

#打开HTML

webview_flutter : ^231

#表情

emoji_picker_flutter : ^108

#扇形进度

ai_progress : ^200

#喜欢按钮

tiktok_favorite_gesture : ^100

#获取手机信息

device_info : ^203

#包信息

package_info : ^202

device_apps : ^211

#倒计时

stop_watch_timer : ^131

#发现Android和iOS上的网络（WiFi和移动/蜂窝）连接状态

connectivity_plus : ^220

#从应用程序打开iOS和Android手机设置。

app_settings : ^411

#日志上报

sentry_flutter : ^612

#后退拦截

back_button_interceptor : ^502

#视频播放器

better_player : ^0081

#APP启动图

flutter_native_splash : ^204

#JSON-TO-MAPPER

dart_json_mapper : ^2117

#HTML展示

flutter_html : ^300-alpha2

#XD to Flutter

adobe_xd : ^201

flutter_svg : ^103

#APPBAR背景色渐变

new_gradient_app_bar : ^020

#音频播放

flame_audio : ^100

#入门介绍页

intro_slider : ^303

#键盘

keyboard_actions : ^345

emoji_keyboard_flutter : ^127

#单选选择框

flutter_pickers : ^219

webview的版本是webview_flutter: ^0322+1

现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。这时候没办法了，网页web端密码框需要修改一下了自己自定义一下不调用密码类型就好，但是无法被输入框d上去，后来解决方案是用SingleChildScrollView包裹一下，然后自己监听一下键盘的d窗和隐藏做一下jump的高度就好了

ps： jump的时候要注意高度，可以在键盘出来的时候底部增加一个只有高度的view，键盘收起隐藏就好了

在 Flutter 里有大大小小的d出框，例如：AlertDialog、SimpleDialog 等。

对于d出框这些都不会直接使用它的组件，而是使用对应的调用函数（showDialog）。

AlertDialog 是一个用于向用户传递信息的d出层。

SimpleDialog 是一个用于向用户传递确定信息并提供选项的d出层。

    针对日常不同的需求，我们时常需要自定义 Dialog ，而小菜在尝试过程中遇到一些小问题，简单记录总结一下；

    小菜在自定义含有文本框的 Dialog 时，文本框获取焦点时，软键盘会部分遮挡对话框，但当小菜替换为 AlertDialog 时，文本框获取焦点时，对话框会向上浮动，避免软键盘遮挡；

    对于含有文本框的自定义 Dialog ，小菜在最外层使用的是 Material 嵌套，小菜通过采用 Scaffold 来嵌套处理，默认 Scaffold 中 resizeToAvoidBottomPadding / resizeToAvoidBottomInset 为 true ，当设置为 false 时，文本框获取焦点时，依旧会被软键盘遮挡；因为在固定情景可以配合 resizeToAvoidBottomPadding 实现是否被软键盘遮挡效果；

     resizeToAvoidBottomPadding 主要用于自身 Widget 是否避免被其他窗口遮挡；其中小菜查资料介绍在 Flutter 119 之后更推荐使用 resizeToAvoidBottomInset ；

    小菜自定义一个可以多选 item 的 Dialog ，但 Dialog 中并没有状态更新的 State ，如何进行 Dialog 中状态更新呢？

    小菜之前在 showDialog 时直接创建了 TypeListDialog ，此时是无状态的，当 WidgetBuilder 创建一个 StatefulBuilder 有状态的构造器即可，可以将 state 传递到 Dialog 中；

    小菜在自定义 Dialog 时如何在一个回调方法中传递多个参数？

    小菜在 Dialog 的回调方法中传递两个 List ，而在接收回调方法中匹配两个参数即可；小菜简单看作是一个函数方法；

    小菜在重写 AppBar 时，如何取消默认的返回按钮？

    取消 AppBar 前面的返回图标有多种方式；

     自定义 Dialog 案例源码

    小菜对于 Flutter 的应用还不够熟悉，很多常用的场景会处理的很不到位，小菜会对日常的小问题进行简单记录，逐步学习；如有错误，请多多指导！

Checkbox 是一个复选框组件，通常用于设置的选项里。

Checkbox 有以下常用属性：

CheckboxListTile 是一个 Checkbox 的上层封装，它的外观是提供类似设置页的选择组件，可设置图标和文字。

以上就是关于Flutter-02编译器选择全部的内容，包括:Flutter-02编译器选择、flutter 键盘d出时list view 置底、flutter(四,常用组件)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！