Flutter,Flutter教程,Flutter问题

flutter常见命令整理收藏

2020-07-01 Flutter

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 Flutter

449 0

搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。效果图展示：说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能import'package:flutter/material.dart'; import'detail_page.dart'; classHomePageextendsStatefulWidget{ _TvPageStatecreateState()=>_TvPageState(); } class_TvPageStateextendsStatewithAutomaticKeepAliveClientMixin{ @override voidinitState(){ super.initState(); } @override Widgetbuild(BuildContextcontext){ //super.build(context); returnScaffold( backgroundColor:Color.fromRGBO(244,245,245,1), appBar:AppBar( title:Container( child:InkWell( onTap:(){ showSearch(context:context,delegate:CustomSearchDelegate());//实现点击跳转至搜索页面 }, child:Row( children:[ 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:[ 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 ), ) ], ) ), ], ), ), ) ), ); } //搜索 classCustomSearchDelegateextendsSearchDelegate{ @override ListbuildActions(BuildContextcontext){ return[ IconButton( tooltip:'Clear', icon:constIcon(Icons.clear), onPressed:(){ query=''; showSuggestions(context); }, ) ]; } @override StringgetsearchFieldLabel=>"影视名称/主演"; WidgetbuildLeading(BuildContextcontext){ returnIconButton( tooltip:'Back', icon:AnimatedIcon( icon:AnimatedIcons.menu_arrow, progress:transitionAnimation, ), onPressed:(){ this.close(context,null); }, ); } @override TextInputTypegetkeyboardType=>TextInputType.text;//设置输入框输入内容类型 @override WidgetbuildResults(BuildContextcontext){ //if(int.parse(query)>=100){ //returnCenter(child:Text('请输入小于100的数字')); //} varmap=Map(); map["query"]=query; returnScaffold( body:FutureBuilder( future:request('gsearchs',formData:map), builder:(context,AsyncSnapshotsnapshot){ if(snapshot.connectionState==ConnectionState.done){ if(snapshot.hasData){ vardata=json.decode(snapshot.data.toString()); returnListView.builder( itemCount:List.of(data["data"]).length, itemBuilder:(BuildContextcontext,intindex){ returnInkWell( 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{ returnCenter(child:CircularProgressIndicator()); } }else{ returnCenter(child:CircularProgressIndicator()); } }) ); } @override WidgetbuildSuggestions(BuildContextcontext){ varmap=Map(); map["query"]=query; returnScaffold( body:FutureBuilder( future:request('gsearchs',formData:map), builder:(context,snapshot){ if(snapshot.connectionState==ConnectionState.done){ if(snapshot.hasData){ vardata=json.decode(snapshot.data.toString()); returnListView.builder( itemCount:List.of(data["data"]).length, itemBuilder:(BuildContextcontext,intindex){ returnInkWell( 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{ returnCenter(child:CircularProgressIndicator()); } }else{ returnCenter(child:CircularProgressIndicator()); } }) ); } }

flutter页面间跳转和销毁方法

2020-07-01 Flutter

479 0

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

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

2020-07-01 Flutter

229 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代码：returnInkWell( 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({Keykey,@requiredthis.eachVodId,@requiredthis.eachVodName,@requiredthis.p,@requiredthis.url}):super(key:key);定义变量：finalinteachVodId; finalStringeachVodName; finalintp;3.2,、获取数据：widget.eachVodId;3.3、demo代码：import'package:flutter/material.dart'; classDetailPageextendsStatefulWidget{ DetailPage({Keykey,@requiredthis.eachVodId,@requiredthis.eachVodName,@requiredthis.p,@requiredthis.url}):super(key:key); finalinteachVodId; finalStringeachVodName; finalintp; _DetailStatecreateState()=>_DetailState(); } class_DetailStateextendsState{ @override voidinitState(){ super.initState(); varmap=Map(); map["id"]=widget.eachVodId; map["p"]=widget.p; } Widgetbuild(BuildContextcontext){} }

flutter网络编程之dio封装

2020-07-01 Flutter

394 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'; Futurerequest(url,{formData})async{ try{ Responseresponse; Diodio=newDio(); //dio.options.contentType=ContentType.parse('application/x-www-form-urlencoded'); if(formData==null){ response=awaitdio.post(servicePath[url]); }else{ response=awaitdio.post(servicePath[url],data:formData); } if(response.statusCode==200){ returnresponse; }else{ throwException('后端接口异常..'); } }catch(e){ returnprint('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）constbase_url="http://new.163.top/api/Index/";//公共域名 constservicePath={ 'gmovie':base_url+'gmovie',//获取电影 };三、使用方法：定义一个方法请求数据request(请求方法,请求参数’)voidinitState(){ super.initState(); _getvod(); } void_getvod(){ request('gmovie',formData:page).then((val){ vardata=json.decode(val.toString()); ListnewvodList=(data['data']asList).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'; classMoviePageextendsStatefulWidget{ _MoviePageStatecreateState()=>_MoviePageState(); } class_MoviePageStateextendsState{ //电影 intpage=1; ListvodList=[]; //防止刷新处理保持当前状态 @override boolgetwantKeepAlive=>true; GlobalKey_headerKey=newGlobalKey(); GlobalKey_footerKey=newGlobalKey(); @override voidinitState(){ super.initState(); _getvod(); } @override Widgetbuild(BuildContextcontext){ //super.build(context); returnScaffold( 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){ returnEasyRefresh( 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:[ _vodBox(),//电影 ], ), loadMore:()async{ _getvod(); }, onRefresh:_pullToRefresh, ); }else{ returnCenter( child:CircularProgressIndicator() ); //returnCenter( //child:Text('加载中'), //); } }, ), ); } //获取电影数据 void_getvod(){ request('gmovie',formData:page).then((val){ vardata=json.decode(val.toString()); ListnewvodList=(data['data']asList).cast(); setState((){ vodList.addAll(newvodList); page++; }); }); } //下拉刷新,必须异步async不然会报错 Future_pullToRefresh()async{ print('正在刷新'); page=1; vodList.clear(); _getvod(); returnnull; } //电影 Widget_warpvodList(){ ListlistWiget=vodList.map((val){ returnInkWell( 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:[ 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(); returnWrap( spacing:2, children:listWiget, ); } //电影组合 Widget_vodBox(){ returnContainer( child:Column( children:[ _warpvodList() ], ), ); } }

Flutter视频播放器推荐

2020-07-01 Flutter

393 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_MyHomePageStateextendsState{ finalFijkPlayerplayer=FijkPlayer(); @override voidinitState(){ super.initState(); player.setDataSource( "https://sample-videos.com/video123/flv/240/big_buck_bunny_240p_10mb.flv", autoPlay:true); } @override voiddispose(){ super.dispose(); player.release(); } @override Widgetbuild(BuildContextcontext){ returnScaffold( appBar:AppBar( //HerewetakethevaluefromtheMyHomePageobjectthatwascreatedby //theApp.buildmethod,anduseittosetourappbartitle. 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 Flutter

357 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中添加如下权限4在页面引入和使用：import'package:wakelock/wakelock.dart'; //... //ThefollowinglinewillenabletheAndroidandiOSwakelock. Wakelock.enable(); //Thenextlinedisablesthewakelockagain. Wakelock.disable();

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

2020-06-25 Flutter

203 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 Flutter

511 0

笔者第一次学flutter,踩坑不少，填坑也不少，不得不说官网在打包的这块留太多坑了。以下是笔者做好flutter项目中遇到的一些问题。一、SDK篇1、修改flutter.gradle 和resolve_dependencies.gradle路径：flutter/packages/flutter_tools/gradle/flutter.gradleflutter/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中配置签名（这里和官方的不一样，官方的有坑，一直读取加载不到签名文件和密码）官方打包所在坑位置：通过编辑/android/app/build.gradle文件为您的应用配置签名替换:buildTypes{ release{ //TODO:Addyourownsigningconfigforthereleasebuild. //Signingwiththedebugkeysfornow,so`flutterrun--release`works. signingConfigsigningConfigs.debug } }为:signingConfigs{ release{ keyAlias'key' keyPassword'123456' storeFilefile("D:/ProgramFile/flutter_word/key.jks") storePassword'123456' } } buildTypes{ release{ signingConfigsigningConfigs.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 文件，并添加以下规则：#FlutterWrapper -keepclassio.flutter.app.**{*;} -keepclassio.flutter.plugin.**{*;} -keepclassio.flutter.util.**{*;} -keepclassio.flutter.view.**{*;} -keepclassio.flutter.**{*;} -keepclassio.flutter.plugins.**{*;}上述配置只混淆了 Flutter 引擎库，任何其他库（比如 Firebase）需要添加与之对应的规则。3.2、开启混淆/压缩打开 /android/app/build.gradle 文件，定位到 buildTypes 块。在 release 配置中将 minifyEnabled 和 useProguard 设为 true，再将混淆文件指向上一步创建的文件。android{ ... buildTypes{ release{ signingConfigsigningConfigs.release minifyEnabledtrue useProguardtrue } } }3.3、以上改好之后执行 flutter clean 清下缓存flutterclean四、构建一个发布版（release）APK本节介绍如何构建发布版（release）APK。如果您完成了前一节中的签名步骤，则会对APK进行签名。使用命令行:cd 项目目录 (为您的工程目录).运行flutter build apk (flutter build 默认会包含 --release选项).flutterbuildapk打包好的发布APK位于项目目录下/build/app/outputs/apk/release/app-release.apk。以下即为打包成功式例：来看文件夹下文件：

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

2020-06-24 Flutter

230 0

本文主要说的是mac系统下的flutter环境安装。如果是window系统的伙伴，可以参考另一篇文章：Win10下 Flutter环境完整安装记录、教程安装步骤说明：1.打开终端，cd到你要安装的目录2. 下载flutter：gitclone-bbetahttps://github.com/flutter/flutter.git3.下载好flutter后就在当前目录下执行： export PATH=`pwd`/flutter/bin:$PATH或者：此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中,需要修改 .bash_profile 文件vim~/.bash_profileexportPATH=/Users/huipu/Downloads/work/flutter/bin:$PATH exportPUB_HOSTED_URL=https://pub.flutter-io.cn//国内用户需要设置 exportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn//国内用户需要设置保存后，最后执行：source ~/.bash_profile让这个配置文件在修改后立即生效。4. 如果下载失败的话执行：exportPUB_HOSTED_URL=https://pub.flutter-io.cn exportFLUTTER_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 Flutter

350 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之前，先执行一下命令exportPUB_HOSTED_URL=https://pub.flutter-io.cn exportFLUTTER_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 Flutter

780 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 Flutter

189 0

大家最近都在讨论新鲜技术-flutter，小编也在学习中，遇到大家都遇到的问题，底部导航。下面给大家贴出底部导航的编写。1、在lib文件加下，新建文件夹和页面文件2、 navigator/tab_navigator.dart下示例代码：/* *@Author:yourname *@Date:2020-06-1321:00:21 *@LastEditTime:2020-06-1322:59:25 *@LastEditors:PleasesetLastEditors *@Description:InUserSettingsEdit *@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'; classTabNavigatorextendsStatefulWidget{ @override _TabNavigatorStatecreateState()=>_TabNavigatorState(); } class_TabNavigatorStateextendsState{ final_defaultColor=Colors.grey; final_activeColor=Colors.blue; int_currentIndex=0; finalPageController_controller=PageController( initialPage:0, ); @override Widgetbuild(BuildContextcontext){ returnScaffold( body:PageView( controller:_controller, children:[ 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:yourname *@Date:2020-06-0822:09:39 *@LastEditTime:2020-06-1323:10:24 *@LastEditors:PleasesetLastEditors *@Description:InUserSettingsEdit *@FilePath:\flutter_word\flutter_app\lib\main.dart */ import'package:flutter/material.dart'; import'package:flutter_app/navigator/tab_navigator.dart'; voidmain()=>runApp(MyApp()); classMyAppextendsStatelessWidget{ @override Widgetbuild(BuildContextcontext){ returnMaterialApp( title:'FlutterDemo', theme:ThemeData( primarySwatch:Colors.blue ), home:TabNavigator(), ); } }4、效果如下：感谢大家的阅读，你的阅读是我前进的动力。

Flutter实现轮播图banner

2020-06-14 Flutter

302 0

轮播图在app中必不可少，最近笔者也在做app，以下是一个简单的flutter实现banner轮播图方法，提供给大家参考。1、安装轮播组件打开pubspec.yaml文件将flutter_swiper: ^1.1.4插件添加到pubspec.yaml里面2、实现代码：/* *@Author:yourname *@Date:2020-06-1321:00:21 *@LastEditTime:2020-06-1323:26:45 *@LastEditors:PleasesetLastEditors *@Description:InUserSettingsEdit *@FilePath:\flutter_word\flutter_app\lib\navigator\tab_navigator.dart */ import'package:flutter/material.dart'; import'package:flutter_swiper/flutter_swiper.dart'; classHomePageextendsStatefulWidget{ @override _HomePageStatecreateState()=>_HomePageState(); } class_HomePageStateextendsState{ 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 Widgetbuild(BuildContextcontext){ returnScaffold( body:Center( child:Column( children:[ Container( height:200, child:Swiper( itemCount:_imageUrls.length, autoplay:true, itemBuilder:(BuildContextcontext,intindex){ returnImage.network( _imageUrls[index], fit:BoxFit.fill, ); }, pagination:SwiperPagination(), ), ), ], ), ), ); } }3、效果图

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

2020-06-10 Flutter

316 0

本文主要说的是win10系统下的flutter环境安装。如果是mac系统的伙伴，可以参考另一篇文章：mac flutter 环境搭建、安装教程记录flutter开发SDK使用git克隆仓库下载。至于git的使用不是本篇文章介绍的内容，不熟悉git的请移步git使用详细教程一、下载flutter在git命令行下输入如下命令：gitclone-balphahttps://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