![](https://img-blog.csdnimg.cn/20200416091618615.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Flutter
零基础 Flutter 学习
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
flutter 与 react-native 之gradle-x.x-all.zip 下载缓慢或失败解决方法
官网下载gradle-x.x-all.zip之后复制到文件夹C:\Users\用户名\.gradle\wrapper\dists\gradle-x.x-all\xxxxxx\内即可,不要解压。下载对应版本:原创 2020-10-09 14:54:05 · 338 阅读 · 0 评论 -
flutter 渐变色
flutter 颜色渐变:Positioned.fill( //使用绝对定位可全局渐变(可不用) child: Container( decoration: BoxDecoration( gradient: LinearGradient( //渐变位置 begin: Alignment.topRight, //右上 end: Alignment.bottomLeft, //左下 stops: [0.0, 1.0],原创 2020-07-11 11:35:46 · 15220 阅读 · 1 评论 -
flutter FlatButton 按钮填充满 Container
flutter FlatButton按钮填充满Container:Container( child: SizedBox( //使用SizedBox给子元素指定固定的宽高 width: double.infinity, //设置宽高最大 height: double.infinity, child: new FlatButton( onPressed: () { setState(() { }); },原创 2020-07-11 09:11:44 · 1658 阅读 · 0 评论 -
flutter 数据存储3种方式
flutter 数据存储3种方式1. sqflite 插件 官方推荐的重量级存储插件 需要有sql基础,对数据库增删改查GitHub地址学习文档相关API2. shared_preferences插件 官方提供目前使用最广泛便捷的flutte存储数据方式,类似浏览器的localStorage存储官方地址学习文档3. flie 通过文件来存储数据,一般情况不推荐使用读取效率低官方地址学习文档...原创 2020-07-05 18:39:18 · 2580 阅读 · 0 评论 -
flutter 路由插件fluro配置及其使用
flutter 路由插件fluro配置及其使用pubspec.yaml:引入插件dependencies: flutter: sdk: flutter fluro: "^1.6.3"1. 首先创建一个router_handler.dart文件,定义路由去到哪个部件,以及传递给该部件的参数:router_handler.dart文件如下:import 'pagckage:flutter/material.dart';//引入路由插件fluro 需要在pubspec.yaml文件中原创 2020-07-05 17:43:43 · 917 阅读 · 0 评论 -
flutter json工厂模式
请求到的JSON:{ "a": "aa", "b": [ { "ba": "b1111", "bb": "b2222" }, { "ba": "b3333", "bb": "b4444" } ], "c": { "ca": "c111", "cb": "c222" }}对原创 2020-07-05 10:00:42 · 389 阅读 · 0 评论 -
flutter 禁止GridView滚动
flutter 禁止GridView滚动:child: GridView.count( physics: NeverScrillableScrollPhysics(),)原创 2020-07-05 00:00:06 · 2819 阅读 · 1 评论 -
flutter 页面缓存
flutter页面缓存方法:混入AutomaticKeepAliveClientMixin部件设置页面缓存://在动态部件内class Page1 extends StatefulWidget { @override _Page1State createState() => _Page1State();}//混入AutomaticKeepAliveClientMixin 设置缓存class _Page1State extends State<MyHomePage> wi原创 2020-07-04 20:30:46 · 2209 阅读 · 0 评论 -
flutter 输入控件
flutter 输入控件的使用://1.声明控件TextEditingController typeController = TextEditingController()//2.使用输入框TextField( controller: typeController, decoration: InputDecoration( contentPadding: EdgeInsets.all(10.0), labelText: '用户名', helperText: '请输原创 2020-07-04 17:01:01 · 412 阅读 · 0 评论 -
flutter 去除超出警报
给超出内容套上SingleChildScrollView组件即可SingleChildScrollView( child: ...)原创 2020-07-04 16:53:01 · 927 阅读 · 0 评论 -
flutter 打开外部地图应用插件
效果图如下:1. 配置 pubspec.yaml文件:dependencies: map_launcher: ^0.6.02. 调用外部地图软件:IconButton(icon: Icon(Icons.map), onPressed: _showMap) //或 _gotoMap//直接进入地图组件_gotoMap() async { final availableMaps = await MapLauncher.installedMaps; print(availableM原创 2020-06-20 23:51:36 · 1080 阅读 · 0 评论 -
flutter 下拉刷新插件flutter_easyrefresh
效果图如下1 . 配置文件 pubspec.yamldependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter ... flutter_easyrefresh: ^2.1.1**2 . 配置文件main.dart **...import 'package:flutter_easyrefresh/easy_refresh.dart';import 'package:flutte原创 2020-06-20 22:59:22 · 10650 阅读 · 0 评论 -
flutter 路由守卫
main.dart文件void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', //路由守卫 路由执行顺序 home -> route -> onGenerateRoute -> onUn原创 2020-06-17 23:50:49 · 958 阅读 · 0 评论 -
flutter 路由配置多种跳转与传参
main.dart文件//1. 引入路由跳转的页面import 'package:app_ftr/pages/Page1.dart';import 'package:app_ftr/pages/Page2.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Material原创 2020-06-17 23:38:32 · 1110 阅读 · 0 评论 -
flutter 跳转页面传参与返回参数
普通页面跳转import './Detail.dart';//1. 跳转到Detail页面组件Navigator.of(context).push( MaterialPageRoute( builder: (context)=>Detail(Test:'我是参数')) );//2. 返回Navigator.of(context).pop();跳转后 页面返回时传值//跳转到Detail页面组件onPressed: () async { //从子页面中传递过来的数据是异步的 d原创 2020-06-16 22:47:56 · 1790 阅读 · 1 评论 -
flutter 实现底部tabBar 页面跳转效果
效果图如下: 点击底部tabBar切换页面代码如下://主页面底部tabbarimport 'package:app_ftr/pages/DyPage.dart';import 'package:flutter/material.dart';import 'package:flutter_screenutil/screenutil.dart';//动态组件class IndexPage extends StatefulWidget { IndexPage({Key key}) : su原创 2020-06-16 22:28:25 · 1233 阅读 · 0 评论 -
flutter Provider组件间获取数据正确用法 (数据订阅发布)
1 . 根组件注册Provider安装Provider库:pubspec.yaml文件dependencies: flutter: sdk: flutter ... provider: ^4.1.3注册Provider: main.dart文件:void main() { runApp( //注册Provider MultiProvider( providers: [ ChangeNotifierProvider<TabBa原创 2020-06-16 21:12:27 · 3355 阅读 · 2 评论 -
flutter 顶部状态栏透明
flutter 顶部状态栏透明main.js文件:void main() { //顶部状态栏透明 SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle(statusBarColor: Colors.transparent) ); runApp(child: MyApp());}原创 2020-06-16 20:42:53 · 3023 阅读 · 0 评论 -
flutter 使用阿里图标
1. 下载图标 阿里图标2. 解压 将iconfont.ttf放入lib\assets\icons内解压下载的阿里图标文件 我们只需要里面的iconfont.ttf文件将iconfont.ttf文件放入lib\assets\icons内3. 配置pubspec.yaml文件 # example: 下面引入的是阿里云图标 alIcons是iconfont.ttf图标家族的自定义名称 fonts: - family: alIcons fonts: -原创 2020-06-16 20:38:32 · 1260 阅读 · 0 评论 -
flutter Text数字超出全部隐藏 解决方法
如图: 刚开始是这样的问题原因: 前面的 " ID: " 与后面的文字存在间隙解决方法://修改前child: Text("ID: 1114954321", maxLines: 1, overflow: TextOverflow.ellipsis,)//修改后 (除去空格即可)child: Text("ID:1114954321", maxLines: 1, overflow: TextOverflow.ellipsis,)修改后 如图原创 2020-06-16 20:17:30 · 3981 阅读 · 0 评论 -
flutter upgrade 报错 Could not determine the dependencies of task :app:compileDebugJavaWithJavac 解决方
报错如下:FAILURE: Build failed with an exception. * What went wrong: Could not determine the depende原创 2020-05-30 10:25:44 · 1344 阅读 · 0 评论 -
flutter 实战天猫首页案例
效果图:GitHub Flutter学习源码:https://github.com/shunyue1320/flutter-studyappbar代码:appBar: AppBar( centerTitle: true, //elevation: 0, //bar底部阴影 leading: IconButton( highlightColor: Colors.transpar...原创 2020-05-05 15:55:41 · 752 阅读 · 0 评论 -
flutter Scroll x轴y轴滚动条
效果图如下:y轴滑动:代码如下:child: Container( width: double.infinity, height: 200, color: Colors.grey, alignment: Alignment.topLeft, child: SingleChildScrollView( scrollDirection: Axis.vertical, //y轴滚...原创 2020-05-04 15:19:22 · 1079 阅读 · 0 评论 -
flutter Flex Wrap Stack Align布局
1.flex布局:Flex(direction: Axis.horizontal, //水平反向(direction不能为空)direction: Axis.vertical, //垂直反向Expanded(flex: 1))实现代码如下:child: Container( width: 400, height: 150, color: Colors.grey, c...原创 2020-05-04 13:32:13 · 1153 阅读 · 0 评论 -
flutter Row布局详解
Row布局:水平对齐方式横轴对齐方式child: Row( //水平对齐 mainAxisAlignment: MainAxisAlignment.center, //水平居中对齐 //mainAxisAlignment: MainAxisAlignment.start, //水平居左对齐(默认) //mainAxisAlignment: MainAxisAlignment...原创 2020-05-04 09:23:28 · 5089 阅读 · 0 评论 -
flutter头部tabTop滚动栏
效果图如下:main.dart代码如下:import 'package:flutter/material.dart';//启动函数void main() => runApp(MyApp());//自定义组件class MyApp extends StatelessWidget { @override Widget build(BuildContext context)...原创 2020-04-05 22:10:53 · 1065 阅读 · 0 评论 -
flutter多种底部导航栏样式
1.底部导航栏 (外弧样式)实现代码://引入flutter的dart库import 'package:flutter/material.dart';//启动函数void main() => runApp(MyApp());//自定义组件class MyApp extends StatelessWidget { @override Widget build(Buil...原创 2020-04-05 12:10:05 · 1838 阅读 · 3 评论 -
flutter报错Your app isn’t using AndroidX.解决方法
flutter报错Your app isn’t using AndroidX.并报错无法运行:解决方法:gradle.properties文件添加如下字段:android.enableJetifier=trueandroid.useAndroidX=true如图:保存后再次运行:成功!...原创 2020-04-05 09:09:37 · 2311 阅读 · 1 评论 -
Flutter项目打包成安卓apk详解来了(解决安装没网络问题)
Flutter项目打包成安卓apk步骤:cmd使用keytool创建 keystore创建一个名为key.properties的文件编辑/android/app/build.gradle文件配置签名替换android/app/src/main/res文件夹内各尺寸打包图片logo配置联网权限等一系列你需要的权限cmd项目目录运行:flutter build apk1.cmd使用k...原创 2020-03-29 19:11:40 · 5667 阅读 · 0 评论 -
Flutter - FileSystemException: Cannot open file, path = '/path' (OS Error: Operation not permitted,
vscode运行dart文件报错:run运行 输出报错Flutter - FileSystemException: Cannot open file, path = '/path' (OS Error: Operation not permitted,解决方法:初次运行打开cmd通过命令行运行dart文件:dart 文件名.dart例如:dart index.dart...原创 2020-03-28 17:56:40 · 7510 阅读 · 0 评论 -
pub get一直卡在Resolving dependencies...
添加pubspec.yaml配置bup get一直卡在Resolving dependencies…原因:访问国外下载很慢,我们需要配置镜像:解决方法:官方提供的国内镜像:export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn...原创 2020-03-28 11:20:23 · 2203 阅读 · 0 评论 -
1.Flutter 抽屉组件drawer 自定义宽度,触发按钮
效果图如下:实现代码如下:drawer: Drawer( child: ListView( //抽屉里面一个list部件 padding: EdgeInsets.all(0), children: <Widget>[ //所有子部件 UserAccountsDrawerHeader( //用户信息栏 accountName: Te...原创 2020-03-15 21:39:45 · 3388 阅读 · 1 评论 -
Flutter doctor "Android license status unknown."报错解决方法
报错如下:Android license status unknown.Try re-installing or updating your Android SDK Manager.See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for ...原创 2020-02-29 17:35:24 · 3636 阅读 · 0 评论 -
Flutter项目运行报错 A problem occurred configuring root project ‘android‘. 解决方法
报错如下* Error running Gradle:ProcessException: Process "C:\Users\shunyue\mydemo\flutter_app\android\gradlew.bat"Starting a Gradle Daemon (subsequent builds will be faster)FAILURE: Build failed wit...原创 2020-02-29 17:06:00 · 47960 阅读 · 7 评论 -
安装Flutter + Android sdk + vs code运行Flutter项目(史上最详解)
前言: Flutter开发app是基于Dart语言开发的,就好比html网页开发基于JavaScript一样,而浏览器内核都可以编译JavaScript代码,所有开发html网页不需要下载啥SDK,直接在浏览器就能运行。首先我们安装Dart语言的SDK,便于运行Flutter开发的app1.Dart安装: 下载地址:https://gekorm.com/dart-windows/找到下载好的...原创 2020-02-28 09:21:02 · 5207 阅读 · 3 评论