
flutter
胖哥哥飘过
这个作者很懒,什么都没留下…
展开
-
flutter学习--Container容器组件
Alignment属性bottomCenter:下部居中对齐。botomLeft: 下部左对齐。bottomRight:下部右对齐。center:纵横双向居中对齐。centerLeft:纵向居中横向居左对齐。centerRight:纵向居中横向居右对齐。topLeft:顶部左侧对齐。topCenter:顶部居中对齐。topRight: 顶部居左对齐。import 'packag...原创 2019-05-13 20:46:42 · 590 阅读 · 0 评论 -
flutter学习--列表组件
基本使用使用ListView,然后在他的内部children中,使用了widget数组,因为是一个列表,所以它接受一个数组,然后有使用了listTite组件(列表瓦片),在组件中放置了图标和文字。body: new ListView( children:<Widget>[ new ListTile( leading:new Icon(Icons.access...原创 2019-05-17 19:13:21 · 2344 阅读 · 0 评论 -
flutter学习--流式布局 模拟添加照片效果
mediaQuery 媒体查询使用meidaQuery可以很容易的得到屏幕的宽和高,得到宽和高的代码如下:final width = MediaQuery.of(context).size.width;final height = MediaQuery.of(context).size.height;Wrap流式布局单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Column表现...原创 2019-05-26 15:28:50 · 718 阅读 · 0 评论 -
flutter学习--搜索框
主入口文件继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个自定义的Widget,主要代码都在这个文件中。import 'package:flutter/material.dart';import 'search_bar_demo.dart';void main() =>runApp(MyApp());class MyApp ext...原创 2019-05-26 15:13:03 · 10297 阅读 · 2 评论 -
flutter学习--Text组件
Text组件属性为了展示效果,首先编写如下代码:import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { retu...原创 2019-05-12 22:39:57 · 297 阅读 · 0 评论 -
flutter学习--编写简单的app
创建 Flutter appAndroid Studio上直接Flie->new->new Flutter Project创建一个应用创建出来的项目结构如图所示在lib文件夹下,已经自动创建一个main.dart文件,import 'package:flutter/material.dart';void main() => runApp(MyApp());cla...原创 2019-05-12 19:11:39 · 1400 阅读 · 0 评论 -
flutter学习--酷炫的路由动画
酷炫的路由动画主入口方法import 'package:flutter/material.dart';import 'pages.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ...原创 2019-05-21 19:02:47 · 2829 阅读 · 0 评论 -
flutter学习--不规则底部导航栏制作
不规则底部导航栏自定义主题样本Flutter支持自定义主题,如果使用自定义主题,设置的内容项是非常多的,Flutter贴心的为给我们准备了主题样本。theme: ThemeData( primarySwatch: Colors.lightBlue,),会了这个知识后,我们就可以先把我们的主入口文件编写一下了,具体代码如下:import 'package:flutter/mater...原创 2019-05-21 16:12:24 · 1038 阅读 · 0 评论 -
flutter学习--底部导航栏制作
底部导航栏制作主入口文件的编写import 'package:flutter/material.dart';import 'bottom_navigation_widget.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget{ @override Widget build(Bu...原创 2019-05-21 16:00:27 · 296 阅读 · 0 评论 -
flutter学习--安装与配置
下载git clone -b beta https://github.com/flutter/flutter.git修改bash配置文件,在行末添加这几行vim ~/.bash_profileexport PATH='你的flutter的bin文件夹路径'export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STO...原创 2019-05-11 16:44:42 · 278 阅读 · 0 评论 -
flutter学习--保持页面状态
在工作中切换页面时,再切换回来,时要求页面状态不发生改变的。这能给APP浏览者最好的体验,几乎所有的APP都有这个需求,属于一个大众需求。With 关键字的使用with是dart的关键字,意思是混入的意思,就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类, 避免多重继承导致的问题。class _KeepAliveDemoState extends State<KeepAli...原创 2019-05-24 17:04:19 · 3363 阅读 · 0 评论 -
flutter学习--毛玻璃制作效果
Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果。这节我们就以实战的方式,制作一个毛玻璃效果BackdropFilter WidgetBackdropFilter就是背景滤镜组件,使用它可以给父元素增加滤镜效果,它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件,实例中我们添加了图片滤镜组件,并给了模糊效果。import ...原创 2019-05-24 17:00:30 · 3626 阅读 · 0 评论 -
flutter学习--页面跳转
一般页面导航和返回RaisedButton按钮组件它有两个最基本的属性:child:可以放入容器,图标,文字。让你构建多彩的按钮。onPressed:点击事件的相应,一般会调用Navigator组件。Navigator.push 和 Navigator.popNavigator.push:是跳转到下一个页面,它要接受两个参数一个是上下文context,另一个是要跳转的函数。...原创 2019-05-19 21:29:32 · 8745 阅读 · 0 评论 -
flutter学习--布局
Row水平布局不灵活水平布局import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return Materi...原创 2019-05-19 18:03:33 · 807 阅读 · 0 评论 -
flutter学习--Image组件
加入图片的几种方式Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。Image.memory: 加载Uint8Li...原创 2019-05-13 21:57:42 · 1365 阅读 · 0 评论 -
bilibili案例学习—框架搭建
fluro跳转路由库引入:dependencies: fluro: "^1.4.0"初始化:在main.dart文件中main方法中初始化void main() { //路由配置 var router = new Router(); Routers.configRouters(router); Application.router = router; runApp...原创 2019-07-08 21:17:34 · 1433 阅读 · 0 评论