duo_shine的博客

本文学习Flutter打包,打包环境,Android studio3.2,打包的程序就使用上文的酷炫天气预报 terminal执行下列命令: 1.生成key(如果有现成的Key跳过这一步) 2.key.properties创建 3.app的build.gradle中配置，这个文件位于这个位置 a:使用我们刚刚创建的配置文件原 android {改为 ...

前言:我是一个标题狗正文:其实只有两个页面,非常简单,学习完前面的Flutter内容,你应该可以自己做出更好的,但是这个很简单很适合新手上手,代码量比较少,容易看懂， 本文将不再手把手带敲了,看下效果图做下简单介绍,代码已上传github,做飞机去github 简单介绍: 第一个页面就是首页,显示一个实况天气和一个三天趋势预报,效果如下 点击左下角的+号跳转到城市列表,选择城市后...

本文学习使用在程序中使用字体 https://fonts.google.com/?selection.family=Hanalei+Fill (有很多字体供选择)需翻墙,这里我们随便下载了一下用来演示 如果你没有字体可以用,可以去下载我的字体,飞机票在使用字体之前我们需要做一些准备工作 1.在项目的根目录创建一个文件夹用来放字体文件 2.在pubspec.yaml文件中添加如...

本文将学习和原生平台交互,我们通过一个小案例来演示和Android平台的交互 ios? 你让我用window10演示ios?MethodChannel： 用于使用异步方法调用与平台插件通信的通道 “samples.flutter.io/battery” 为通道标识，名称相同的通道会干扰彼此的通信 其他的注释应该说的清楚了import 'dart:async';/** *使用...

本文将学习一个新内容 http 这个炒鸡感兴趣吧？ 使用http我们需要添加插件 http: ^0.11.3+16 这个写法的意思就是 >=0.11.19 <0.12.0 这里我们使用和风天气的API接口来做测试,因为最后我们的天气预报demo也是使用这个api,比较简单 实现效果点击按钮 通过http请求实况天气,并显示请求结果, 效果如下: main.d...

基于上篇文章(动画),扩展一个小知识，wdiget的删除和添加更好的实现方式:Opacity,通过Opacity的透明度值来控制 widget显示和隐藏 这比在树中删除和添加widget效率更高,包括material提供的字体属性 /** *wdiget的删除和添加更好的实现方式 包括material提供的字体属性 */import 'package:flutter/materi...

本文开始学习Flutter动画渲染动画AnimatedWidget简化监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）用AnimatedBuilder重构并行动画/** * 动画实例5 并行动画 */import 'package:flutter/material.dart';import 'package:flutter/animation.dart'...

本文开始学习Flutter动画渲染动画AnimatedWidget简化监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）用AnimatedBuilder重构并行动画/** * 动画实例4-用AnimatedBuilder重构 */import 'package:flutter/material.dart';import 'package:flutter/a...

本文开始学习Flutter动画渲染动画*AnimatedWidget简化 监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）用AnimatedBuilder重构 并行动画/** * 动画实例3-监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向） */import 'package:flutter/material.dart';import 'pac...

本文开始学习Flutter动画渲染动画 AnimatedWidget简化 监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）用AnimatedBuilder重构 并行动画/** * 动画实例1 -渲染动画 */import 'package:flutter/material.dart';import 'package:flutter/animation.da...

本文开始学习Flutter动画渲染动画AnimatedWidget简化监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）用AnimatedBuilder重构并行动画 将分为五文来学习/** * 动画实例1 -渲染动画 */import 'package:flutter/material.dart';import 'package:flutter/anim...

本文要学习新的内容,接收用户输入/** *输入文本 */import 'package:flutter/material.dart';import 'package:flutter/animation.dart';void main() { runApp(new MaterialApp( title: "input", home: new Scaffold( ...

3.跳转到下一个页面并携带数据返回 本文我们实现一个在京南商城从首页跳转到购物车并选择你要买啥返回通过SnackBar来显示跳转携带返回的数据….厉害了这么长,hia hia hia(一种笑声 很难模仿) 这个功能类似于Android的startActivityForResultimport 'dart:async';import 'package:flutter/material.d...

在上文中学习了简单的页面跳转,本文将在跳转中携带数据到下一个页面 2.跳转到下一个页面并携带数据import 'package:flutter/material.dart';import 'package:meta/meta.dart';final todos = new List<Todo>.generate( 20, (i) => ne...

本文将学习新内容,页面跳转1.跳转到下一个页面import 'package:flutter/material.dart';import 'package:meta/meta.dart';/** * 跳转到新页面并返回 */void main() { runApp(new MaterialApp( title: "Flutter", home: new Fi...

本文将要学习一个列表点击添加一个删除线的效果,StatefulWidget我们将要活学活用，这在前面虽然使用了但是并没有着重介绍import 'package:flutter/material.dart';/** * 用户输入交互 */class Product { final String name; //常量构造函数 其目的是让类生成的对象永远不会改变 变成编译时常量 ...

本文开始 将学习一些交互操作了,一个应用不可能就是展示,肯定需要和用户交互 本文将学习点击事件 GestureDetector, 不用说你也知道他是一个widget，他并不具有显示效果，而是检测由用户做出的手势(点击拖动和缩放) 在前面的文中我们学习过ListTitl和一些其他widget,这些widget默认也具有点击事件，还有一些iconButton等widget都具有点击事件,但是还是...

本文将学习如何控制Row/Column-行/列，对于Row来说,水平方向就是主轴,垂直方向就是横轴，对于Column来说,垂直方向就是主轴,水平方向就是横轴 mainAxisAlignment/crossAxisAlignment..等 如何使用这些属性来控制其子项对齐,在前面的 学习中已经使用过多次了,这里单独再介绍一次 这里借用官方的两张图再借用一个小案例,聚集widgets...

本文将介绍一个新的内容 GridView,之前我们使用Container实现了一个网格效果,但只是为了学习组合widget,下面我们将通过GridView来实现网格效果 这里只介绍四种方式 实现网格布局，先看各实现代码,最后有完整版代码1.extent/** * 1.最常用的网格布局之extent */Widget _buildGrid1() { return new ...

本文将介绍一个新的内容,侧滑删除,这在列表项中应用比较广泛,他就是Dismissible，想当然是一个widget，你可以想到它肯定不止可以用在列表项中,任何一个widget作为他的子项都可以实现滑动删除，这在Android中我们通常需要自定义控件来实现,但是在Flutter中.gif太麻烦看下静态效果图,当然你可以脑补一下.直接看代码,新内容都添加了注释import 'packa...

本文将学习一个新的widget-Card,通过Card我们可以实现卡片效果,这个效果目前非常常见,本文中我们将组合上一篇学习的Stack一起实现一个卡片效果/** * Card */import 'package:flutter/material.dart';void main() { runApp(new MyApp());}class MyApp extends S...

本文将学习一个新的widget-Stack,他类似于Android的FrameLayout,层叠效果 我们来实现这样的一个效果;一个简单的圆形头像 并在上面放置一个text文本 图片就使用Flutter的菜鸟教程三:Row/Column布局，添加的方式即可,不会的可以去看一下// Copyright 2017 The Chromium Authors. All rights reser...

本文将使用container来实现一个网格效果,这可以使我们更熟悉widget组合使用,当然这类效果我们应该使用GridView来实现,这在后续的文章中将会学习 本文中将没有新的内容,我们可以使用前面学习的内容来组合本篇文章的效果,看到效果图你有思路吗？注意他是可以垂直滚动的// Copyright 2017 The Chromium Authors. All rights re...

本文学习一下列表widget，是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非常大的列表 4.内置的ListTile(挺好用的)4.内置的ListTile(挺好用的),先看下这个widget,在下面的listView中将直接使用/** * ListTil...

本文将实现一个MatrtialApp,将更熟悉Flutter的布局机制如何工作,如何垂直和水平布局widget,如何组合widget组成更复杂的widget1.准备工作,可以看到我们的效果图上有显示img,所以我们需要做一些准备工作 这样我们的准备工作做完了，当然你可以使用你自己的图片 先看下运行效果:下面开始撸，为了便于理解,整体将分为几部分实现，最后组合即可...

在上一篇中我们第一个应用显示出来很丑有没有？本篇将显示一个materialAppimport 'package:flutter/material.dart';void main() { /** * runApp函数将根控件显示在屏幕上 */ runApp(new MaterialApp( title: "我的应用",// 使用主题更改Ui the...

Flutter是什么？跨平台(Android/ios)构建移动应用程序的简单高效方式Flutter核心只有一层轻量的C/C++代码，而上层使用了Dart语言(一种现代的、简洁的、面向对象的语言-ps:我没学直接当java来用了。。。),更多了解Flutter可以去官网,包括安装Flutter的开发环境,为什么不从安装开发环境开始？我在学习Flutter的过程中发现只要baidu输入Fl...