Flutter,Flutter教程,Flutter问题

解决Android studio 创建虚拟机时提示a system image must be selected continue问题

2020-12-10

在使用android studio的时候，很多新手在创建虚拟机的时候回出现 a system image must be selected continue错误。里明显是缺少了systemImage,解决方法如下打开SDK MANAGER,然后把右下角的show package details勾上,把对应的system image下载下来即可

flutter常见命令整理收藏

2020-07-01

878 0

1、帮助命令：flutter -h2、显示本机的模拟器：flutter emulators3、启动本机的模拟器：flutter emulator --launch apple_ios_simulator4、远程更新package：flutter packages get5、运行应用到模拟器上：flutter run6、热重载：先保存代码ctrl+s,，然后在 terminal中输入r，执行后界面内容更新7、停止运行：ctrl+zVSCode中常用的快捷键R 键重新启动r 键热重载q 退出p 显示网格P 显示帧率o 切换Android与iOS的预览模式

flutter搜索功能实现

2020-07-01

3018 0

搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。效果图展示：说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能import;'package:flutter/material.dart'; import;'detail_page.dart'; ; class;HomePage;extends;StatefulWidget{ ;;_TvPageState;createState();=>;_TvPageState(); } ; class;_TvPageState;extends;State<HomePage>;with;AutomaticKeepAliveClientMixin{ ;;@override ;;void;initState(){ ;;;;super.initState(); ;;} ;;@override ;;Widget;build(BuildContext;context){ //;;;;super.build(context); ;;;;return;Scaffold( ;;;;;;backgroundColor:;Color.fromRGBO(244,;245,;245,;1), ;;;;;;appBar:;AppBar( ; ;;;;;;;;title:;Container( ;;;;;;;;;;child:InkWell( ;;;;;;;;;;;;onTap:;(){ ;;;;;;;;;;;;;;showSearch(context:;context,;delegate:;CustomSearchDelegate());;//实现点击跳转至搜索页面 ;;;;;;;;;;;;}, ;;;;;;;;;;;;child:;Row( ;;;;;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;child:;Text( ;;;;;;;;;;;;;;;;;;;;'广州', ;;;;;;;;;;;;;;;;;;;;style:;TextStyle(fontSize:;14), ;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(50), ;;;;;;;;;;;;;;;;;;child:;Icon( ;;;;;;;;;;;;;;;;;;;;;;Icons.expand_more, ;;;;;;;;;;;;;;;;;;;;;;color:;Colors.white, ;;;;;;;;;;;;;;;;;;;;;;size:20 ;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(515), ;;;;;;;;;;;;;;;;;;;;decoration:;BoxDecoration( ;;;;;;;;;;;;;;;;;;;;;;color:;Colors.white, ;;;;;;;;;;;;;;;;;;;;;;borderRadius:;BorderRadius.all(Radius.circular(50.0)), ;;;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;;;;;height:;30, ;;;;;;;;;;;;;;;;;;;;child:;Row( ;;;;;;;;;;;;;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(60), ;;;;;;;;;;;;;;;;;;;;;;;;;;;;child: ;;;;;;;;;;;;;;;;;;;;;;;;;;;;Icon( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;Icons.search, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;color:;Colors.grey, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;size:20 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;) ;;;;;;;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(400), ;;;;;;;;;;;;;;;;;;;;;;;;;;child: ;;;;;;;;;;;;;;;;;;;;;;;;;;Text( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;'影视名称/主演', ;;;;;;;;;;;;;;;;;;;;;;;;;;;;style:;TextStyle(color:;Colors.black,fontSize:;16), ;;;;;;;;;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(50), ;;;;;;;;;;;;;;;;;;;;;;;;;;child:;Icon( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;Icons.mic, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;color:;Colors.grey, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;size:20 ;;;;;;;;;;;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;;;;;;;;;;;], ;;;;;;;;;;;;;;;;;;;;) ;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;], ;;;;;;;;;;;;), ;;;;;;;;;;), ;;;;;;;;) ;;;;;;), ;;;;); ;;} ; //搜索 class;CustomSearchDelegate;extends;SearchDelegate;{ ;;@override ;;List<Widget>;buildActions(BuildContext;context);{ ;;;;return;[ ;;;;;;IconButton( ;;;;;;;;tooltip:;'Clear', ;;;;;;;;icon:;const;Icon(Icons.clear), ;;;;;;;;onPressed:;();{ ;;;;;;;;;;query;=;''; ;;;;;;;;;;showSuggestions(context); ;;;;;;;;}, ;;;;;;) ;;;;]; ;;} ; ;;@override ;;String;get;searchFieldLabel;=>;"影视名称/主演"; ;;Widget;buildLeading(BuildContext;context);{ ;;;;return;IconButton( ;;;;;;tooltip:;'Back', ;;;;;;icon:;AnimatedIcon( ;;;;;;;;icon:;AnimatedIcons.menu_arrow, ;;;;;;;;progress:;transitionAnimation, ;;;;;;), ;;;;;;onPressed:;();{ ;;;;;;;;this.close(context,;null); ;;;;;;}, ;;;;); ;;} ; ;;@override ;;TextInputType;get;keyboardType;=>;TextInputType.text;;;//设置输入框输入内容类型 ; ;;@override ;;Widget;buildResults(BuildContext;context);{ //;;;;if;(int.parse(query);>=;100);{ //;;;;;;return;Center(child:;Text('请输入小于;100;的数字')); //;;;;} ;;;;var;map;=;Map(); ;;;;map["query"];=;query; ;;;;return;Scaffold( ;;;;;;;;body:;FutureBuilder( ;;;;;;;;;;;;future:;request('gsearchs',formData:;map), ;;;;;;;;;;;;builder:;(context,AsyncSnapshot;snapshot);{ ;;;;;;;;;;;;;;if(snapshot.connectionState;==ConnectionState.done){ ;;;;;;;;;;;;;;;;if(snapshot.hasData){ ;;;;;;;;;;;;;;;;;;var;data;=;json.decode(snapshot.data.toString()); ;;;;;;;;;;;;;;;;;;return;ListView.builder( ;;;;;;;;;;;;;;;;;;;;;;itemCount:;List.of(data["data"]).length, ;;;;;;;;;;;;;;;;;;;;;;itemBuilder:;(BuildContext;context,;int;index);{ ;;;;;;;;;;;;;;;;;;;;;;;;return;InkWell( ;;;;;;;;;;;;;;;;;;;;;;;;;;onTap:;(){ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eachVodId:;List.of(data["data"])[index]['id'], ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eachVodName:List.of(data["data"])[index]['vod_name'], ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;p:1 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;); ;;;;;;;;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;;;;;;;;;;;child:ListTile(title:;Text(List.of(data["data"])[index]['vod_name'])), ;;;;;;;;;;;;;;;;;;;;;;;;); ; ;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;); ;;;;;;;;;;;;;;;;}else{ ;;;;;;;;;;;;;;;;;;return;Center(child:;CircularProgressIndicator()); ;;;;;;;;;;;;;;;;} ; ;;;;;;;;;;;;;;}else{ ;;;;;;;;;;;;;;;;return;Center(child:;CircularProgressIndicator()); ;;;;;;;;;;;;;;} ; ;;;;;;;;;;;;}) ;;;;); ;;} ; ;;@override ;;Widget;buildSuggestions(BuildContext;context);{ ;;;;var;map;=;Map(); ;;;;map["query"];=;query; ;;;;return;Scaffold( ;;;;;;;;body:;FutureBuilder( ;;;;;;;;;;;;future:;request('gsearchs',formData:;map), ;;;;;;;;;;;;builder:;(context,;snapshot);{ ;;;;;;;;;;;;;;if(snapshot.connectionState;==ConnectionState.done){ ;;;;;;;;;;;;;;;;if(snapshot.hasData){ ;;;;;;;;;;;;;;;;;;var;data;=;json.decode(snapshot.data.toString()); ;;;;;;;;;;;;;;;;;;return;ListView.builder( ;;;;;;;;;;;;;;;;;;;;;;itemCount:;List.of(data["data"]).length, ;;;;;;;;;;;;;;;;;;;;;;itemBuilder:;(BuildContext;context,;int;index);{ ;;;;;;;;;;;;;;;;;;;;;;;;return;InkWell( ;;;;;;;;;;;;;;;;;;;;;;;;;;onTap:;(){ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eachVodId:;List.of(data["data"])[index]['id'], ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eachVodName:List.of(data["data"])[index]['vod_name'], ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;p:1 ; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;); ;;;;;;;;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;;;;;;;;;;;child:ListTile(title:;Text(List.of(data["data"])[index]['vod_name'])), ;;;;;;;;;;;;;;;;;;;;;;;;); ; ;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;); ;;;;;;;;;;;;;;;;}else{ ;;;;;;;;;;;;;;;;;;return;Center(child:;CircularProgressIndicator()); ;;;;;;;;;;;;;;;;} ; ;;;;;;;;;;;;;;}else{ ;;;;;;;;;;;;;;;;return;Center(child:;CircularProgressIndicator()); ;;;;;;;;;;;;;;} ; ;;;;;;;;;;;;}) ;;;;); ; ;;} ; }

flutter页面间跳转和销毁方法

2020-07-01

2043 0

1、push方法：直接跳转到下个页面，可以传递参数Navigator.of(context).push( ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ //TextWdigetPage要跳转的页面 //title要传递的参数 ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;})) ; ),或者Navigator.push(context, ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;}) )2、页面的销毁：跳转后的操作，route == null 为销毁当前页面Navigator.pushAndRemoveUntil(context, ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;}),;(route);=>;route;==;null )

futter页面跳转，列表跳转至详情页介绍

2020-07-01

802 0

1、使用InkWell（）包裹元素，onTap(){}点击跳转onTap:;(){ ;;Navigator.of(context).push( ;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;eachVodId:;val['id'], ;;;;;eachVodName:;val['vod_name'], ;;;;;p:1 ;;;;;)) ); }1.1、demo代码：;;;;;;return;InkWell( ;;;;;;;;onTap:;(){ ;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;eachVodId:;val['id'], ;;;;;;;;;;;;;;;;;;eachVodName:;val['vod_name'], ;;;;;;;;;;;;;;;;;;p:1 ;;;;;;;;;;;;;;)) ;;;;;;;;;;); ;;;;;;;;}, ;;;;;;);2、引入详情页面，不然报错import;'detail_page.dart';3、详情页接受数据：3.1、接受数据：DetailPage({Key;key,;@required;this.eachVodId,;@required;this.eachVodName,;@required;this.p,;@required;this.url});:;super(key:;key);定义变量：;;final;int;eachVodId; ;;final;String;eachVodName; ;;final;int;p;3.2,、获取数据：widget.eachVodId;3.3、demo代码：import;'package:flutter/material.dart'; class;DetailPage;extends;StatefulWidget{ ;;DetailPage({Key;key,;@required;this.eachVodId,;@required;this.eachVodName,;@required;this.p,;@required;this.url});:;super(key:;key); ;;final;int;eachVodId; ;;final;String;eachVodName; ;;final;int;p; ;;_DetailState;createState();=>;_DetailState(); } class;_DetailState;extends;State<DetailPage>;{ ;;@override ;;void;initState();{ ;;;;super.initState(); ;;;;var;map;=;Map(); ;;;;map["id"];=;widget.eachVodId; ;;;;map["p"];=;widget.p; } Widget;build(BuildContext;context);{} }

flutter网络编程之dio封装

2020-07-01

1903 0

一、添加依赖pubspec.yamldependencies: dio:;^3.0.9二、dio封装2.1、创建http_service.dart文件（/lib/service/http_conf.dart），用于dio请求封装import;'package:dio/dio.dart'; import;'dart:async'; import;'dart:io'; import;'../config/index.dart'; import;'../config/http_conf.dart'; ; Future;request(url,{formData})async{ ;;try{ ;;;;Response;response; ;;;;Dio;dio;=;new;Dio(); //;;;;dio.options.contentType;=;ContentType.parse('application/x-www-form-urlencoded'); ;;;;if(formData;==;null){ ;;;;;;response;=;await;dio.post(servicePath[url]); ;;;;}else{ ;;;;;;response;=;await;dio.post(servicePath[url],data:formData); ;;;;} ;;;;if(response.statusCode;==;200){ ;;;;;;return;response; ;;;;}else{ ;;;;;;throw;Exception('后端接口异常..'); ;;;;} ;;}catch(e){ ;;;;return;print('error:::${e}'); ;;} }2.2、创建index.dart文件（/lib/service/ index.dart）用于引入http_conf.dart配置export;'http_conf.dart';2.3、创建http_conf.dart文件（lib/config/ http_conf.dart）const;base_url="http://new.163.top/api/Index/";;;//公共域名 const;servicePath;={ ;;'gmovie':base_url;+;'gmovie',//获取电影 };三、使用方法：; 定义一个方法请求数据request(请求方法,请求参数’)void;initState(){ ;;;;super.initState(); ;;;;_getvod(); ;;} void;_getvod(){ ;;;;request('gmovie',formData:;page).then((val){ ;;;;;;var;data;=;json.decode(val.toString()); ;;;;;;List<Map>;newvodList;=;(data['data'];as;List).cast(); ;;;;;;setState(();{ ;;;;;;;;vodList.addAll(newvodList); ;;;;;;;;page++; ;;;;;;}); ;;;;}); ;;}四、demo以下以获取列表数据为例：import;'package:flutter/material.dart'; import;'package:flutter/rendering.dart'; import;'package:flutter_screenutil/flutter_screenutil.dart'; import;'../config/index.dart'; import;'../service/http_service.dart'; import;'dart:convert'; import;'package:flutter_easyrefresh/easy_refresh.dart'; import;'detail_page.dart'; import;'package:date_format/date_format.dart'; ; ; ; class;MoviePage;extends;StatefulWidget{ ;;;;_MoviePageState;createState();=>;_MoviePageState(); } ; class;_MoviePageState;extends;State<MoviePage>{ ; ;;//电影 ;;int;page=1; ;;List<Map>;vodList;=;[]; ; ;;//防止刷新处理;保持当前状态 ;;@override ;;bool;get;wantKeepAlive;=>;true; ; ;;GlobalKey<RefreshHeaderState>;_headerKey;=;new;GlobalKey<RefreshHeaderState>(); ;;GlobalKey<RefreshFooterState>;_footerKey;=;new;GlobalKey<RefreshFooterState>(); ; ;;@override ;;void;initState(){ ;;;;super.initState(); ;;;;_getvod(); ;;} ; ;;@override ;;Widget;build(BuildContext;context){ //;;;;super.build(context); ;;;;return;Scaffold( ;;;;;;backgroundColor:;Color.fromRGBO(244,;245,;245,;1), ;;;;;;appBar:;AppBar( ;;;;;;;;title:;Text(KSting.movieTitle),), ;;;;;;body:;FutureBuilder( ;;;;;;;;future:;request('gmovie',formData:;null), ;;;;;;;;builder:;(context,snapshot){ ;;;;;;;;;;if(snapshot.hasData){ ;;;;;;;;;;;;return;EasyRefresh( ;;;;;;;;;;;;;;refreshFooter:;ClassicsFooter( ;;;;;;;;;;;;;;;;key:;_footerKey, ;;;;;;;;;;;;;;;;bgColor:;Colors.white, ;;;;;;;;;;;;;;;;textColor:;KColor.refreshTextColor, ;;;;;;;;;;;;;;;;moreInfoColor:;KColor.refreshTextColor, ;;;;;;;;;;;;;;;;showMore:;true, ;;;;;;;;;;;;;;;;moreInfo:;"${formatDate(DateTime.now(),;[yyyy,;'-',;mm,;'-',;dd,';',HH,;':',;nn,':',;ss])}",;//加载中 ;;;;;;;;;;;;;;;;loadText:;KSting.loadText, ;;;;;;;;;;;;;;;;loadReadyText:;KSting.loadReadyText, ;;;;;;;;;;;;;;;;loadingText:;KSting.loadingText, ;;;;;;;;;;;;;;;;loadedText:;KSting.loadedText, ;;;;;;;;;;;;;;;;noMoreText:;KSting.noMoreText, ;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;refreshHeader:ClassicsHeader( ;;;;;;;;;;;;;;;;key:;_headerKey, ;;;;;;;;;;;;;;;;refreshText:;KSting.loadText, ;;;;;;;;;;;;;;;;refreshReadyText:;KSting.refreshReadyText, ;;;;;;;;;;;;;;;;refreshingText:;KSting.refreshingText, ;;;;;;;;;;;;;;;;refreshedText:;KSting.refreshedText, ;;;;;;;;;;;;;;;;moreInfo:;"${formatDate(DateTime.now(),;[yyyy,;'-',;mm,;'-',;dd,';',HH,;':',;nn,':',;ss])}", ;;;;;;;;;;;;;;;;bgColor:;Colors.white, ;;;;;;;;;;;;;;;;textColor:;KColor.refreshTextColor, ;;;;;;;;;;;;;;;;moreInfoColor:;KColor.refreshTextColor, ;;;;;;;;;;;;;;;;showMore:;true, ;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;child:;ListView( ;;;;;;;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;;;;;;;_vodBox(),//电影 ;;;;;;;;;;;;;;;;], ;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;loadMore:;()async{ ;;;;;;;;;;;;;;;;_getvod(); ;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;onRefresh:;_pullToRefresh, ;;;;;;;;;;;;); ;;;;;;;;;;}else{ ;;;;;;;;;;;;return;Center( ;;;;;;;;;;;;;;;;child:;CircularProgressIndicator() ;;;;;;;;;;;;); //;;;;;;;;;;;;return;Center( //;;;;;;;;;;;;;;child:;Text('加载中'), //;;;;;;;;;;;;); ;;;;;;;;;;} ;;;;;;;;}, ; ;;;;;;), ;;;;); ;;} ;;//获取电影数据 ;;void;_getvod(){ ;;;;request('gmovie',formData:;page).then((val){ ;;;;;;var;data;=;json.decode(val.toString()); ;;;;;;List<Map>;newvodList;=;(data['data'];as;List).cast(); ;;;;;;setState(();{ ;;;;;;;;vodList.addAll(newvodList); ;;;;;;;;page++; ;;;;;;}); ;;;;}); ;;} //;;下拉刷新,必须异步async不然会报错 ;;Future;_pullToRefresh();async;{ ;;;;print('正在刷新'); ;;;;page;=;1; ;;;;vodList.clear(); ;;;;_getvod(); ;;;;return;null; ;;} ; ;;//电影 ;;Widget;_warpvodList(){ ; ;;;;List<Widget>;listWiget;=vodList.map((val){ ;;;;;;return;InkWell( ;;;;;;;;onTap:;(){ ;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;eachVodId:;val['id'], ;;;;;;;;;;;;;;;;;;eachVodName:;val['vod_name'], ;;;;;;;;;;;;;;;;;;p:1 ;;;;;;;;;;;;;;)) ;;;;;;;;;;); ;;;;;;;;}, ;;;;;;;;child:;Container( ;;;;;;;;;;width:;ScreenUtil().setWidth(235), ;;;;;;;;;;color:;Colors.white, ;;;;;;;;;;padding:;EdgeInsets.only(bottom:;20.0,top:;15.0), ;;;;;;;;;;child:;Column( ;;;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;;;Image.network( ;;;;;;;;;;;;;;;;val['vod_pic'], ;;;;;;;;;;;;;;;;width:;ScreenUtil().setWidth(235), ;;;;;;;;;;;;;;;;height:;150, ;;;;;;;;;;;;;;;;fit:;BoxFit.cover, ;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;Text( ;;;;;;;;;;;;;;;;val['vod_name'], ;;;;;;;;;;;;;;;;maxLines:;1, ;;;;;;;;;;;;;;;;overflow:;TextOverflow.ellipsis, ;;;;;;;;;;;;;;;;style:;Kfont.tvStyle, ;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;Text( ;;;;;;;;;;;;;;;;;;val['vod_content'], ;;;;;;;;;;;;;;;;;;maxLines:;1, ;;;;;;;;;;;;;;;;;;overflow:;TextOverflow.ellipsis, ;;;;;;;;;;;;;;;;;;style:;Kfont.mintvStyle ;;;;;;;;;;;;;;), ;;;;;;;;;;;;], ;;;;;;;;;;), ;;;;;;;;), ;;;;;;); ;;;;}).toList(); ;;;;return;Wrap( ;;;;;;spacing:;2, ;;;;;;children:;listWiget, ;;;;); ;;} //电影组合 ;;Widget;_vodBox(){ ;;;;return;Container( ;;;;;;child:;Column( ;;;;;;;;children:;<Widget>[ ;;;;;;;;;;_warpvodList() ;;;;;;;;], ;;;;;;), ;;;;); ;;} }

Flutter视频播放器推荐

2020-07-01

2296 0

fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核。ijkplayer 使用 ffmpeg 进行音视频解封装和解码，同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。;fijkplayer 具有和 ijkplayer 一样的播放能力，并且开箱即用，不需要使用者再去编译 ijkplayer，API易用，易于在 Flutter 项目中集成。;fijkplayer 通过纹理方式将播放器视频画面渲染接入 flutter 中，性能上优于 PlatformView 的接入方法。 fijkplayer 有内置的编译好的ffmepg 和 ijkplayer。;Github下载：https://github.com/befovy/fijkplayer码云下载：https://gitee.com/jyblogs/fijkplayer包含快速开始、使用指南、fijkplayer 中的概念理解：https://fijkplayer.befovy.com/docs/zh/一、安装：pubspec.yamldependencies: ;fijkplayer:;^0.8.4二、使用说明：编辑 lib/main.dart 文件，在开头加入如下行，引入 fijkplayer。import;'package:fijkplayer/fijkplayer.dart';三、Hello Worldclass;_MyHomePageState;extends;State<MyHomePage>;{ ;;final;FijkPlayer;player;=;FijkPlayer(); ; ;;@override ;;void;initState();{ ;;;;super.initState(); ;;;;player.setDataSource( ;;;;;;;;"https://sample-videos.com/video123/flv/240/big_buck_bunny_240p_10mb.flv", ;;;;;;;;autoPlay:;true); ;;} ; ;;@override ;;void;dispose();{ ;;;;super.dispose(); ;;;;player.release(); ;;} ; ; ;;@override ;;Widget;build(BuildContext;context);{ ;;;;return;Scaffold( ;;;;;;appBar:;AppBar( ;;;;;;;;//;Here;we;take;the;value;from;the;MyHomePage;object;that;was;created;by ;;;;;;;;//;the;App.build;method,;and;use;it;to;set;our;appbar;title. ;;;;;;;;title:;Text(widget.title), ;;;;;;), ;;;;;;body:;Container( ;;;;;;;;;;width:;ScreenUtil().setWidth(750), ;;;;;;;;;;height:;ScreenUtil().setHeight(410), ;;;;;;;;;;color:;Colors.black, ;;;;;;;;;;child:;Container( ;;;;;;;;;;alignment:;Alignment.center, ;;;;;;;;;;child:;FijkView( ;;;;;;;;;;color:;Colors.black, ;;;;;;;;;;player:;player, ;;;;;;;;;;), ;;;;;;;;) ;;;;;;), ;;;;); ;;} }附效果图：

Flutter使用 Wakelock 插件控制屏幕常亮方法

2020-06-25

1860 0

有时我们在播放视频是需要使屏幕处于常亮状态，这时可以使用Wakelock 插件。;wakelock在android的电源管理系统中扮演一个核心的角色，wakelock是一种锁的机制, 只要有task拿着这个锁, 系统就无法进入休眠, 可以被用户态进程和内核线程获得。这个锁可以是有超时的或者是没有超时的, 超时的锁会在时间过去以后自动解锁。如果没有锁了或者超时了, 内核就会启动标准linux的那套休眠机制机制来进入休眠。github介绍：https://pub.flutter-io.cn/packages/wakelock安装使用说明：1、添加到pubspec.yaml 文件dependencies: ;;wakelock:;^0.1.4+12、获取插件：flutter pub get3、在Manifest中添加如下权限<uses-permission;android:name="android.permission.WAKE_LOCK";/>4在页面引入和使用：import;'package:wakelock/wakelock.dart'; //;... //;The;following;line;will;enable;the;Android;and;iOS;wakelock. Wakelock.enable(); //;The;next;line;disables;the;wakelock;again. Wakelock.disable();

Flutter学习修改app名称和icon图标

2020-06-25

877 0

一个app应用开发到最后，也就剩下上线的步骤了，上线之前除了测试之外还有一个重要的步骤也就是app信息的修改，最近笔者刚好做好了app，以下记录下个人人修改app应用信息和图标流程，供大家参考一、图标icon修改1.1、android应用icon修改（路径：项目/android/app/src/main/res）把各个文件夹下图片换成你想要的尺寸，还有格式必须是.png后缀。1.2、iso应用图标icon修改：（路径：项目/ios/Runner/Assets.xcassets/AppIcon.appiconset/）注意：ios应用图标必须是圆角透明png图标，相比安卓，安卓只需png图标，不需要圆角。二、修改应用名称2.1、安卓应用修改;AndroidManifest.xmlAndroidManifest.xml 文件位于：项目名称/android/app/src/main/下2.2、iso应用修改：Info.plist路径：项目/flutter_vod/ios/Runner/三、结果展示：快来试试修改你的APP吧。

android studio flutter打包，踩坑，填坑详细过程。

2020-06-25

1484 1

笔者第一次学flutter,踩坑不少，填坑也不少，不得不说官网在打包的这块留太多坑了。以下是笔者做好flutter项目中遇到的一些问题。一、SDK篇1、修改flutter.gradle 和;resolve_dependencies.gradle路径：flutter/packages/flutter_tools/gradle/flutter.gradle;;;;;;;;;;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle1.1、flutter.gradle文件修改buildscript部分buildscript;{ ;;;;repositories;{ ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/google';} maven;{;url;'https://maven.aliyun.com/repository/jcenter';} maven;{;url;'http://maven.aliyun.com/nexus/content/groups/public';} ;;;;} ;;;;dependencies;{ ;;;;;;;;classpath;'com.android.tools.build:gradle:3.5.0' ;;;;} }1.2、flutter.gradle文件修改 google() 和 jcenter() 还有 https://storage.googleapis.com/download.flutter.iorepositories;{ ;;;;//google() ;;;;//jcenter() maven;{;url;'https://maven.aliyun.com/repository/google';} ;;;;maven;{;url;'https://maven.aliyun.com/repository/jcenter';} ;;;;//maven;{ ;;;;;;//;;url;"https://storage.googleapis.com/download.flutter.io" ;;;;//} maven;{url;'http://download.flutter.io'} }二、项目APP签名篇2.1、进入java jdk安装目录下的bin文件夹，运行cmd命令2.2、创建 keystorekeytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key2.3、在gradle中配置签名（这里和官方的不一样，官方的有坑，一直读取加载不到签名文件和密码）官方打包所在坑位置：通过编辑<app dir>/android/app/build.gradle文件为您的应用配置签名替换:buildTypes;{ ;;;;release;{ ;;;;;;;;//;TODO:;Add;your;own;signing;config;for;the;release;build. ;;;;;;;;//;Signing;with;the;debug;keys;for;now,;so;`flutter;run;--release`;works. ;;;;;;;;signingConfig;signingConfigs.debug ;;;;} }为:signingConfigs;{ ;;;;release;{ ;;;;;;;;keyAlias;'key' ;;;;;;;;keyPassword;'123456' ;;;;;;;;storeFile;file("D:/ProgramFile/flutter_word/key.jks") ;;;;;;;;storePassword;'123456' ;;;;} } buildTypes;{ ;;;;release;{ ;;;;;;;;signingConfig;signingConfigs.release ;;;;} }2.4、修改项目域名（考虑国内到墙问题）2.4.1、修改项目目录下文件：/android/build.gradle文件中的;google() 和;jcenter()buildscript：buildscript;{ ;;;;repositories;{ //;;;;;;;;google() //;;;;;;;;jcenter() ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/google';} ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/jcenter';} ;;;;} ;;;;dependencies;{ ;;;;;;;;classpath;'com.android.tools.build:gradle:3.5.0' ;;;;} }allprojects ：allprojects;{ ;;;;repositories;{ //;;;;;;;;google() //;;;;;;;;jcenter() ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/google';} ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/jcenter';} ;;;;} }3、开启混淆默认情况下 flutter 不会开启 Android 的混淆。如果使用了第三方 Java 或 Android 库，也许你想减小 apk 文件的大小或者防止代码被逆向破解。3.1、配置混淆创建 /android/app/proguard-rules.pro 文件，并添加以下规则：#Flutter;Wrapper -keep;class;io.flutter.app.**;{;*;;} -keep;class;io.flutter.plugin.**;;{;*;;} -keep;class;io.flutter.util.**;;{;*;;} -keep;class;io.flutter.view.**;;{;*;;} -keep;class;io.flutter.**;;{;*;;} -keep;class;io.flutter.plugins.**;;{;*;;}上述配置只混淆了 Flutter 引擎库，任何其他库（比如 Firebase）需要添加与之对应的规则。3.2、开启混淆/压缩打开 /android/app/build.gradle 文件，定位到 buildTypes 块。在 release; 配置中将 minifyEnabled; 和 useProguard; 设为 true，再将混淆文件指向上一步创建的文件。android;{ ... buildTypes;{ release;{ signingConfig;signingConfigs.release minifyEnabled;true ;;;;;;;;;;;;useProguard;true } } }3.3、以上改好之后执行 flutter clean 清下缓存flutter;clean四、构建一个发布版（release）APK本节介绍如何构建发布版（release）APK。如果您完成了前一节中的签名步骤，则会对APK进行签名。使用命令行:cd 项目目录 (为您的工程目录).运行flutter build apk (flutter build 默认会包含 --release选项).flutter;build;apk打包好的发布APK位于项目目录下/build/app/outputs/apk/release/app-release.apk。以下即为打包成功式例：来看文件夹下文件：

mac flutter 环境搭建、安装教程记录

2020-06-24

798 0

本文主要说的是mac系统下的flutter环境安装。如果是window系统的伙伴，可以参考另一篇文章：Win10下 Flutter环境完整安装记录、教程安装步骤说明：1.打开终端，cd到你要安装的目录2. 下载flutter：;git;clone;-b;beta;https://github.com/flutter/flutter.git3.下载好flutter后就在当前目录下执行： export PATH=`pwd`/flutter/bin:$PATH;或者：此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中,需要修改 .bash_profile 文件vim;~/.bash_profileexport;PATH=/Users/huipu/Downloads/work/flutter/bin:$PATH export;PUB_HOSTED_URL=https://pub.flutter-io.cn;//国内用户需要设置 export;FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn;//国内用户需要设置保存后，最后执行：source ~/.bash_profile;;让这个配置文件在修改后立即生效。4. 如果下载失败的话执行：export;PUB_HOSTED_URL=https://pub.flutter-io.cn export;FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn然后重复2和3即可5.完成后cd 进入flutter，然后执行：flutter doctor，如果flutter sdk没有安装会进入安装，此时需要等待一段时间。6.安装完毕后再执行flutter doctor 看看检查结果红x代表没有安装，绿色的勾才算安装成功，我之前就安装过了所以多个地方配置过绿色的勾会多点，你的不一定要和我一致，只要是flutter要是绿色的，安装没有问题的话，记住你安装sdk的路径。7.Androidstudio需要安装flutter插件8、xcode安装，appstore搜索xcode9、创建 HelloWord项目

解决Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/问题

2020-06-24

1694 0

mac终端执行flutter -h命令后，出现过Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/91a63d6a44c56ca13baadccedc46fd66b001fdbc/dart-sdk-darwin-x64.zipIf you're located in China, please see this page:; https://flutter.dev/community/china 这个问题。解决办法执行flutter -h之前，先执行一下命令export;PUB_HOSTED_URL=https://pub.flutter-io.cn export;FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn成功之后：

flutter踩坑之dio报错Error: The method 'DioHttpHeaders.add' has fewer named arguments than those of overridden method 'HttpHeaders.add'.

2020-06-17

2838 0

Compiler message:../../flutter/.pub-cache/hosted/pub.flutter-io.cn/dio-2.2.2/lib/src/dio_http_headers.dart:55:8: Error: The method 'DioHttpHeaders.add' has fewer named arguments than those of overridden method 'HttpHeaders.add'.; void add(String name, value) {; ; ; ;^org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:694:8: Context: This is the overridden method ('add').; void add(String name, Object value,; ; ; ;^../../flutter/.pub-cache/hosted/pub.flutter-io.cn/dio-2.2.2/lib/src/dio_http_headers.dart:70:8: Error: The method 'DioHttpHeaders.set' has fewer named arguments than those of overridden method 'HttpHeaders.set'.; void set(String name, Object value) {; ; ; ;^org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:703:8: Context: This is the overridden method ('set').; void set(String name, Object value,上面报的这个错是dio版本问题，解决方法是修改pubspec.yaml 文件下的dio版本。dio:;^3.0.9再次运行：成功。更多flutter问题，参考flutter相关文章

flutter实现底部导航，底部导航实现方法

2020-06-15

877 0

大家最近都在讨论新鲜技术-flutter，小编也在学习中，遇到大家都遇到的问题，底部导航。下面给大家贴出底部导航的编写。1、在lib文件加下，新建文件夹和页面文件2、 navigator/tab_navigator.dart下示例代码：/* ;*;@Author:;your;name ;*;@Date:;2020-06-13;21:00:21 ;*;@LastEditTime:;2020-06-13;22:59:25 ;*;@LastEditors:;Please;set;LastEditors ;*;@Description:;In;User;Settings;Edit ;*;@FilePath:;\flutter_word\flutter_app\lib\navigator\tab_navigator.dart ;*/ import;'package:flutter/material.dart'; import;'package:flutter_app/pages/home_page.dart'; import;'package:flutter_app/pages/movie_page.dart'; import;'package:flutter_app/pages/my_page.dart'; import;'package:flutter_app/pages/search_page.dart'; import;'package:flutter_app/pages/tv_page.dart'; import;'package:flutter_app/pages/variety_page.dart'; class;TabNavigator;extends;StatefulWidget{ ;;@override ;;_TabNavigatorState;createState()=>_TabNavigatorState(); } class;_TabNavigatorState;extends;State<TabNavigator>{ ;;final;_defaultColor;=;Colors.grey; ;;final;_activeColor;=;Colors.blue; ;;int;_currentIndex;=;0; ;;final;PageController;_controller=PageController( ;;;;initialPage:;0, ;;); ;;@override ;;Widget;build(BuildContext;context){ ;;;;;;return;Scaffold( ;;;;;;;;body:PageView( ;;;;;;;;;;controller:;_controller, ;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;HomePage(), ;;;;;;;;;;;;TvPage(), ;;;;;;;;;;;;MoviePage(), ;;;;;;;;;;;;VarietyPage(), ;;;;;;;;;;;;SearchPage(), ;;;;;;;;;;;;MyPage(), ;;;;;;;;;;], ;;;;;;;;), ;;;;;;;;bottomNavigationBar:;BottomNavigationBar( ;;;;;;;;;;currentIndex:;_currentIndex, ;;;;;;;;;;onTap:;(index){ ;;;;;;;;;;;;_controller.jumpToPage(index); ;;;;;;;;;;;;setState(();{ ;;;;;;;;;;;;;;_currentIndex;=;index; ;;;;;;;;;;;;}); ;;;;;;;;;;}, ;;;;;;;;;;type:;BottomNavigationBarType.fixed, ;;;;;;;;;;items:[ ;;;;;;;;;;;;BottomNavigationBarItem(icon:;Icon( ;;;;;;;;;;;;;;Icons.home, ;;;;;;;;;;;;;;color:;_defaultColor,;), ;;;;;;;;;;;;;;activeIcon:;Icon( ;;;;;;;;;;;;;;;;Icons.home,;color:_activeColor), ;;;;;;;;;;;;;;;;title:;Text('首页', ;;;;;;;;;;;;;;;;style:;TextStyle( ;;;;;;;;;;;;;;;;;;color:;_currentIndex;!=0;?;_defaultColor;:;_activeColor) ;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;), ;;;;;;;;;;;;BottomNavigationBarItem(icon:;Icon( ;;;;;;;;;;;;;;Icons.missed_video_call, ;;;;;;;;;;;;;;color:;_defaultColor,;), ;;;;;;;;;;;;;;activeIcon:;Icon( ;;;;;;;;;;;;;;;;Icons.missed_video_call,;color:_activeColor), ;;;;;;;;;;;;;;;;title:;Text('剧集', ;;;;;;;;;;;;;;;;style:;TextStyle( ;;;;;;;;;;;;;;;;;;color:;_currentIndex;!=1;?;_defaultColor;:;_activeColor) ;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;), ;;;;;;;;;;;;BottomNavigationBarItem(icon:;Icon( ;;;;;;;;;;;;;;Icons.movie, ;;;;;;;;;;;;;;color:;_defaultColor,;), ;;;;;;;;;;;;;;activeIcon:;Icon( ;;;;;;;;;;;;;;;;Icons.movie,;color:_activeColor), ;;;;;;;;;;;;;;;;title:;Text('电影', ;;;;;;;;;;;;;;;;style:;TextStyle( ;;;;;;;;;;;;;;;;;;color:;_currentIndex;!=2;?;_defaultColor;:;_activeColor) ;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;), ;;;;;;;;;;;;BottomNavigationBarItem(icon:;Icon( ;;;;;;;;;;;;;;Icons.whatshot, ;;;;;;;;;;;;;;color:;_defaultColor,;), ;;;;;;;;;;;;;;activeIcon:;Icon( ;;;;;;;;;;;;;;;;Icons.whatshot,;color:_activeColor), ;;;;;;;;;;;;;;;;title:;Text('综艺', ;;;;;;;;;;;;;;;;style:;TextStyle( ;;;;;;;;;;;;;;;;;;color:;_currentIndex;!=3;?;_defaultColor;:;_activeColor) ;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;), ;;;;;;;;;;;;;BottomNavigationBarItem(icon:;Icon( ;;;;;;;;;;;;;;Icons.perm_identity, ;;;;;;;;;;;;;;color:;_defaultColor,;), ;;;;;;;;;;;;;;activeIcon:;Icon( ;;;;;;;;;;;;;;;;Icons.perm_identity,;color:_activeColor), ;;;;;;;;;;;;;;;;title:;Text('我的', ;;;;;;;;;;;;;;;;style:;TextStyle( ;;;;;;;;;;;;;;;;;;color:;_currentIndex;!=4;?;_defaultColor;:;_activeColor) ;;;;;;;;;;;;;;;;;;) ; ;;;;;;;;;;;;) ;;;;;;;;;;]), ;;;;;;); ;;} }3、 main.dart引入代码：/* ;*;@Author:;your;name ;*;@Date:;2020-06-08;22:09:39 ;*;@LastEditTime:;2020-06-13;23:10:24 ;*;@LastEditors:;Please;set;LastEditors ;*;@Description:;In;User;Settings;Edit ;*;@FilePath:;\flutter_word\flutter_app\lib\main.dart ;*/ import;'package:flutter/material.dart'; import;'package:flutter_app/navigator/tab_navigator.dart'; ; void;main()=>runApp(MyApp()); ; class;MyApp;extends;StatelessWidget{ ;;@override ;;Widget;build(BuildContext;context){ ;;;;return;MaterialApp( ;;;;;;title:'Flutter;Demo', ;;;;;;theme:;ThemeData( ;;;;;;;;primarySwatch:Colors.blue ;;;;;;), ;;;;;;home:;TabNavigator(), ;;;;; ;;;;); ;;} ; }4、效果如下：感谢大家的阅读，你的阅读是我前进的动力。

Flutter实现轮播图banner

2020-06-14

1597 0

轮播图在app中必不可少，最近笔者也在做app，以下是一个简单的flutter实现banner轮播图方法，提供给大家参考。1、安装轮播组件打开pubspec.yaml文件将flutter_swiper: ^1.1.4插件添加到pubspec.yaml里面2、实现代码：/* ;*;@Author:;your;name ;*;@Date:;2020-06-13;21:00:21 ;*;@LastEditTime:;2020-06-13;23:26:45 ;*;@LastEditors:;Please;set;LastEditors ;*;@Description:;In;User;Settings;Edit ;*;@FilePath:;\flutter_word\flutter_app\lib\navigator\tab_navigator.dart ;*/ import;'package:flutter/material.dart'; import;'package:flutter_swiper/flutter_swiper.dart'; class;HomePage;extends;StatefulWidget{ ;;@override ;;_HomePageState;createState()=>_HomePageState(); } class;_HomePageState;extends;State<HomePage>{ ;;List;_imageUrls=[ ;;;;'https://img1.doubanio.com/view/photo/l/public/p2566812248.webp', ;;;;'https://img3.doubanio.com/view/photo/l/public/p2607105432.webp', ;;;;'https://img3.doubanio.com/view/photo/l/public/p2602855730.webp', ;;;;'https://img3.doubanio.com/view/photo/l/public/p2545908092.webp', ;;]; ;;@override ;;Widget;build(BuildContext;context){ ;;;;;;return;Scaffold( ;;;;;;;;body:Center( ;;;;;;;;;;child:;Column( ;;;;;;;;;;;;children:;<Widget>[ ;;;;;;;;;;;;;;Container( ;;;;;;;;;;;;;;;;height:;200, ;;;;;;;;;;;;;;;;child:;Swiper( ;;;;;;;;;;;;;;;;;;itemCount:;_imageUrls.length, ;;;;;;;;;;;;;;;;;;autoplay:;true, ;;;;;;;;;;;;;;;;;;itemBuilder:;(BuildContext;context,int;index){ ;;;;;;;;;;;;;;;;;;;;return;Image.network( ;;;;;;;;;;;;;;;;;;;;;;_imageUrls[index], ;;;;;;;;;;;;;;;;;;;;;;fit:BoxFit.fill, ;;;;;;;;;;;;;;;;;;;;); ;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;;;pagination:;SwiperPagination(), ;;;;;;;;;;;;;;;;), ;;;;;;;;;;;;;;), ;;;;;;;;;;;;], ;;;;;;;;;;), ;;;;;;;;), ;;;;;;); ;;} }3、效果图

Win10下 Flutter环境完整安装记录、教程

2020-06-10

1209 0

本文主要说的是win10系统下的flutter环境安装。如果是mac系统的伙伴，可以参考另一篇文章：mac flutter 环境搭建、安装教程记录flutter开发SDK使用git克隆仓库下载。至于git的使用不是本篇文章介绍的内容，不熟悉git的请移步git使用详细教程一、下载flutter在git命令行下输入如下命令：git;clone;-b;alpha;https://github.com/flutter/flutter.git注意: flutter的下载路径要全英文并且路径不能有空格！执行完命令后等待下载即可。二、配置环境变量在系统环境变量path中添加刚刚下载的flutter的路径。将bin文件路径添加至path中Win10添加效果：三、安装java jdkhttps://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html四、安装androidhttps://developer.android.google.cn/studio五、安装Dart插件和flutter插件搜索Dart插件在右侧点击Install即可。同样的步骤搜索Flutter插件安装即可，安装完成效果：六、创建Flutter项目插件安装完成后，重启Android Studio新建项目会发现增加了创建Flutter项目的选项。一路next，到这一步选择flutter路径和项目路径最终建好的项目：七、安装虚拟机八、在vscode中安装flutterVisual Studio Code下载地：https://code.visualstudio.com/九、配置flutter国内镜像中国镜像地址国内有两个镜像可以用，一个就是官方 Flutter 社区的国内镜像，另一个是上海交通大学 Linux 用户组的镜像，建议用官方 Flutter 社区的国内镜像。Flutter 社区FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cnPUB_HOSTED_URL: https://pub.flutter-io.cn上海交通大学 Linux 用户组FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cnPUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn配置方法需要设置两个环境变量：PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。Windows选择新建环境变量，添加如下的两个环境变量和值：变量名：FLUTTER_STORAGE_BASE_URL 变量值：https://storage.flutter-io.cn变量名：PUB_HOSTED_URL 变量值：https://pub.flutter-io.cn;十、Flutter运行应用报错在搭建 Flutter 环境之前，因为众所周知的原因，有可能被墙，所以需要先为 Flutter 配置中国镜像。;至此，终端下之flutter run，成功如下：相关安装包下载地址：链接：https://pan.baidu.com/s/1mXgcXA-NzJWMMBMWJVMvQQ;提取码：d6g1