卜大爷的博客

Flutter一步实现Toast 弹窗（fluttertoast 库）在 Flutter 中，想要实现一个 Toast 弹窗效果，最简单、最直接的方法就是使用 fluttertoast 库来实现。官网地址：https://pub.flutter-io.cn/packages/fluttertoast如何使用？导入依赖# add this line to your dependenciesfluttertoast: ^7.1.6在使用的地方，导入类import 'package:f

Flutter 设置主题默认文本样式如果想在 Flutter 中设置默认的文本样式，怎么做呢？可以设置一个主题，主题中设置我们想要的字体样式即可，示例代码如下：MaterialApp( theme: ThemeData( primaryColor: Colors.white, textTheme: new TextTheme( headline6: TextStyle(fontSize: 12.0, color: Col

flutter中json、Map、List相互转换json 转 ListString jsonStr = '[{"name":"budaye", "city":"北京"},{"name":"卜大爷", "city":"北京"}]';List list = json.decode(jsonStr);json 转 Map上例中的 list 中，存储的就是 Map 对象： //接着上例： for(int i=0;i<list.length;i++){ Map map

flutter中json、Map、List相互转换json 转 ListString jsonStr = '[{"name":"budaye", "city":"北京"},{"name":"卜大爷", "city":"北京"}]';List list = json.decode(jsonStr);json 转 Map上例中的 list 中，存储的就是 Map 对象： //接着上例： for(int i=0;i<list.length;i++){ Map map

Flutter get方法和set方法实战在 Flutter 中，get 和 set 方法如何实现呢？get 和 set 方法是一对用来读写对象属性的特殊方法，其实，实例对象的每一个属性都有一个隐式的 get 方法，而且如果为非 final 属性的话还会有一个 set 方法。定义和使用 get 和 set 方法我们可以使用 get 和 set 关键字来创建 get 和 set 方法。示例：class Rectangle { double left, top, width, height;

Flutter 小数取整的多种实现&保留小数点后 n 位在 Flutter 中，如果我们在处理小数，想要舍弃小数部分，或者想要保留小数点后面几位，怎么做呢？舍弃小数部分（取整）首先我们来看如何只保留整数位，这里有很多方法可以实现：double price = 100 / 3;//舍弃当前变量的小数部分，结果为 33。返回值为 int 类型。price.truncate();//舍弃当前变量的小数部分，浮点数形式表示，结果为 33.0。返回值为 double。price.trunc

Flutter 计算两个日期的时间差我们在开发中，如果遇到计算2个日期相差多少天，用什么方法获得呢？如果需要知道两个日期相差多少小时、多少分、多少秒，又该如何计算呢?其实在 Flutter 中，想要计算日期和时间的差值非常简单，是需要使用 difference 函数即可。下面举例来说明。示例1. 计算两个日期相差多少天？var startDate = new DateTime(2020, 12, 20);var endDate = new DateTime.now();var days =

Flutter中Row中的子控件左右两端对齐假如我们要实现这样一个效果：两个子控件（例如2个文本）在一行显示，但我们想让它们分别左右两侧对齐，也就是左右一边一个。如何实现呢？方法一：设置 spaceBetween 对齐方式设置 Row 控件的属性 mainAxisAlignment：mainAxisAlignment: MainAxisAlignment.spaceBetween,方法二：Expanded 填充使用 Expanded 中间填充布局空间：new Row( children

Flutter 设置文本框背景先来看最终效果： 普通文本框样式的设置以下设置一个普通的文本框样式：new TextField( controller: _titleTxt, keyboardType: TextInputType.text,//键盘类型 decoration: InputDecoration(//文本框样式设置 contentPadding: EdgeInsets.all(10.0),//内容边距 labelText: '标题',//输入框的描述文本

Flutter 弹出键盘报错解决错误原因报错页面：错误原因：当一个页面的内容不能全部展示出来时，就会出现这种错误。其实这里如果没有键盘弹出，内容长度超过屏幕可显示范围，同样会报错。解决方法这个问题也很容易解决，2种方法。设置 Scaffold 的 resizeToAvoidBottomPadding 属性为 false，这样页面就不会随着键盘弹起而滚动（该方法只针对弹出键盘报错的情况，如果页面内容长度超过屏幕可显示范围，该方法无效）。Scaffold( resizeT

Flutter 中 Card 设置圆角圆角设置非常常用，本文介绍 Card 容器组件的圆角等设置方法。圆角设置//shape 设置边，可以设置圆角shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(20.0)),),单独设置每个圆角大小我们也可以分别设置每个圆角的大小：shape: RoundedRectangleBorder( borderR

Fulutter 设置圆角背景图片&Container 设置边框、圆角、阴影在 Flutter 中，如何实现背景图片呢？又如何实现带圆角的背景图片呢？Fulutter 设置圆角背景图片使用 Container 的 decoration 可以很方便的设置一个容易组件背景图片的圆角大小：Container( decoration: ShapeDecoration( image: new DecorationImage( /

Flutter 圆角图片的几种实现圆角图片是 APP 开发中的常用设置，我们在 Flutter 中如何实现呢？使用 ClipRRect 实现第一种方式，直接使用 ClipRRect 实现，非常简单：ClipRRect( borderRadius: BorderRadius.circular(10), child: Image.asset('assets/images/task_icon.jpg'),),使用 Card 实现第二种方式，使用 Card 来实现：Card( sha

在 Flutter 中显示本地图片1. 创建图片资源目录首先要创建图片资源目录，以存放图片。在项目根目录，创建一个 assets 目录，在它的下面，创建一个叫 images 的子目录，用于存放图片资源：/assets/images/2. 将本地图片添加到资源目录将我们需要用到的图片，添加到 /assets/images/ 目录中。3. 在 pubspec.yaml 中注册将图片目录配置到 pubspec.yaml 文件中：flutter: assets: - assets

flutter 中如何获取输入文本框的内容在开发中，我们经常会用到输入框，那么在 flutter 中，如何获取当前输入框中的文本内容呢？创建输入文本框输入框，我们使用 TextField 这个 Widget，可以非常简单的创建。示例：new TextField( keyboardType: TextInputType.number, decoration: InputDecoration( contentPadding: EdgeInsets.all(10.0), lab

Flutter 日期选择控件使用实战日期选择是 App 开发中的常见功能，本文我们将学习如何在 Flutter 中使用日期选择控件。日历控件显示的几种方式flutter 包含日历和时间控件，有以下几种：DayPicker：已弃用。v1.15.3之后改用 CalendarDatePicker。CalendarDatePicker：1.5版后面的日期选择控件，替代了 YearPicker、MonthPicker、DayPicker。CupertinoDatePicker、CupertinoTim

Flutter 日历组件如何支持中文（国际化）在 App 开发中，我们通常需要用到国际化的支持。Flutter 在默认情况下就是支持国际化，但是在没有进行特别的设置之前，它们无论在什么环境都是以英文的方式显示的。例如，我们显示一个日历组件，默认是英文展示的。我们想要改成中文，或者添加其他语言支持应该怎么做呢？设置语言支持步骤本例中，我们将要为日历组件，添加中文支持。我们来看怎么做？1. 在 pubspec.yaml 中添加如下依赖：flutter_localizations: sdk

Flutter中2个库的类名冲突解决方法例如，我们在使用国际化时，会给组件（如，日历组件），设置一个本地属性来显示当地语言：locale: Locale("zh")上例中，显示中文。当我们引用第三方库 date_format 来格式化日期时，由于 date_format 库中，也包含了 Locale 组件，这时，就会报错。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lUi4kEip-1609149717960)(evernotecid://6FE75482-5

Flutter DateTime日期获取&字符串与日期之间转换DateTime 可以用来获取和设置日期和时间，在开发中常用的一个类。DateTime 的主要属性和方法DateTime 主要方法和属性如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bdZuV9ps-1609149646790)(evernotecid://6FE75482-54A0-433A-9625-A01F7FEE92EC/appyinxiangcom/9896050/ENResour

Flutter 日期格式化库 date_format第三方库 date_format 可以很方便的对日期进行格式化处理，转换成相应格式的字符串输出。添加依赖库首先，在应用的包目录下，找到 pubspec.yaml 文件，并添加如下依赖：dependencies: date_format: ^1.0.9更新依赖包直接在 Android Studio 中点击“Pub get"或者使用如下命令：flutter pub get导入库import 'package:date_f

Flutter 实现 AppBar 功能我们知道，Android 中 Material 布局。只要是在 Material 中使用 AppBar 控件，即可实现 导航条的功能。AppBar 的属性想要使用 AppBar 这个 Widget 组件，首先要了解它的属性： AppBar({ Key key, this.leading,//导航栏左侧的 Widget，例如常见的 back 图标。 this.automaticallyImplyLeading = true,//如果

Flutter 子页面回传参数我们前文《Flutter 中的页面跳转及页面之间传参（路由跳转）》已经学习了如何在页面之间进行跳转，以及如何将参数传递给子页面。但是如果我们在子页面退出时，想让子页面传递参数给父页面，怎么做呢？回传参数使用 Navigator 的 pop 返回可返回上一级，并携带一个参数：Navigator.pop(context,'携带参数'); 父页面，可以通过.then()来接收参数：Navigator.push(context, 子页面对象).then((value)

Flutter 中的页面跳转及页面之间传参（路由跳转）大多数应用程序具有多个页面或视图，并且希望将用户从页面平滑过渡到另一个页面。Flutter 的路由和导航功能可帮助你管理应用中屏幕之间的命名和过渡。管理多个页面时有两个核心概念和类：Route 和 Navigator。 一个 Route 是一个屏幕或页面的抽象，Navigator 是管理 Route 的 Widget。Navigator 可以通过使 Route 入栈和出栈来实现页面之间的跳转。在 Android 开发中，Activity 相当于“

Flutter 底部导航栏（Tab 页）的快速实现我们知道 Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。如果我们想实现底部 Tab 页切换的效果，应该如何做呢？bottomNavigationBarScaffold 的 bottomNavigationBar 属性是一个 BottomNavigationBar 类型的对象。BottomNavigationBar 是底部导航条，可以帮助

Flutter的isolate机制Flutter是使用Dart语言为基础的，所以它的线程机制使用的也是Dart的线程机制。Dart 是单线程，Dart 为我们提供了 isolate，isolate 跟线程差不多，它可以理解为 Dart 中的线程。isolate 与线程的区别就是线程与线程之间是共享内存的，而 isolate 和 isolate 之间是不共享的，所以叫 isolate (隔离)。简单说，可以把它理解为Dart中的线程。但它又不同于线程，更恰当的说应该是微线程，或者说是协程。它与线程最大的

StatelessWidget和StatefulWidget在Flutter中，widget分为两类：Stateful（有状态）和 stateless（无状态）widget。stateless widget 没有内部状态，Icon、IconButton, 和Text都是无状态widget, 它们都是 StatelessWidget的子类。stateful widget 是动态的，用户可以和其交互（例如输入一个表单、 或者移动一个slider滑块），或者可以随时间改变 （也许是数据改变导致的UI更新）

Flutter主题Theme的详解（创建&使用&获取）为了在整个应用中共享颜色和字体样式，我们可以使用主题。定义主题有两种方式：全局主题或使用Theme来定义应用程序局部的颜色和字体样式。事实上，全局主题只是由应用程序根MaterialApp创建的Theme。定义一个主题后，我们可以在我们自己的Widgets中使用它。另外，Flutter提供的Material Widgets将使用我们的主题为AppBars、Buttons、Checkboxes等设置背景颜色和字体样式。创建主题可以

Flutter Widget详解Widget是Flutter应用程序用户界面的基本构建块。每个Widget都是用户界面一部分的不可变声明。 与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flu

Flutter介绍（是什么？优势？核心？）Flutter是什么?Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。它兼容滚动行为、排版、图标等方面的差异。无需移动开发经验即可开始使用。应用程序是用Dart语言编写的，如果你使用过Java或JavaScript之类的语言，则该应用程序看起来很熟悉。使用面向对象语言的经验绝对有帮助，但一些Flutter应用程序

Flutter中Scaffold布局的使用详解及实例代码Scaffold实现了基本的Material布局。只要是在Material中定义了的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。继承关系：Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold。源码/// See also:////// * [AppBar], which is a

本文将给大家介绍如何监听列表的滚动事件，以及如何实现列表的下拉刷新、上拉加载。

Flutter中ListTile列表块的使用详解在Flutter开发中，ListTile是最常用的组件之一，接下来我们就来看下它的属性以及使用方法。属性列表 const ListTile({ Key key, this.leading, //title之前的widget this.title, //列表块的主要内容 this.subtitle, //title下方显示的内容 this.trailing, //标题后显示的widget，通常是一个[Icon]

本节我们学习了Flutter中，最常用的视图之一——列表视图的创建及使用方法。我们可以使用ListView的4种构造方法来创建一个列表视图，并根据自己的需要来进行个性化配置。

Dart语法基础——类Dart 是支持基于 mixin 继承机制的面向对象语言。所有对象都是一个类的实例，而所有的类都继承自 Object 类。基于 mixin 的继承意味着每个除 Object 类之外的类都只有一个超类，一个类的代码可以在其它多个类继承中重复使用。Extension 方法是一种在不更改类或创建子类的情况下向类添加功能的方式。类的成员的访问对象的成员由函数和数据（即方法和实例变量）组成。方法的调用要通过对象来完成，这种方式可以访问对象的函数和数据。使用（.）来访问对象的实

Flutter（Dart）级联运算符（…）的使用级联运算符（…）可以让你在同一个对象上连续调用多个对象的变量或方法。示例示例代码：querySelector('#confirm') // 获取对象 (Get an object). ..text = 'Confirm' // 使用对象的成员 (Use its members). ..classes.add('important') ..onClick.listen((e) => window.alert('Confirmed!'))

Dart语法基础——函数在Dart中，函数（或方法）也是对象，它的类型是 Function。 这意味着，函数可以赋值给变量，也可以当做其他函数的参数。函数的声明基本上与Java类似：String sayName(String name){ return "hi, $name";}在Dart中，参数类型是可选，可以省略显式的类型，但仍然建议显式指定类型：String sayName(name){ return "hi, $name";}简写语法上面的函数，函数体内只包

本文将介绍Dart的数据类型，以及它们的基本用法。

本文我们将实现Flutter的第一个APP——HelloWorld。

Flutter安装及开发环境配置（Windows）本文介绍Windows环境下的Flutter安装以及AndroidStudio配置。Mac版请转到——>Flutter安装及开发环境配置（Mac版）国内镜像众所周知的原因，国内访问google服务可能不太顺畅，如果没有vpn环境，可以访问国内镜像。Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：PUB_HOSTED_URL=https://pub.flutter-io.cnFLUTTER_STO

Flutter安装及开发环境配置，以及Android Studio 配置，为你的第一个Flutter程序准备好开发环境。