之前我们介绍了GestureDetector的定义和其提供的一些基本的方法,GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。
和尚在学习 Flutter过程中遇到很多有趣的小知识点,平时可能不太注意或一些简单直接的小功能点,准备整理一个小系列,方便日后的查找使用。
学习Flutter也有一阵子了。闲着没事,用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了,所以都是些死数据,实现效果可以说是很完美了(得到了设计的认可。。。)。当然自己也是边查边写,也借鉴了许多Github上优秀的Flutter项目。现在开源出来(附带设计图),供大家交流学习。希望多多Star、Fork支持,有问题可以Issue。附上链接:github.com/simplezhli/…
为什么会新增 Button?因为想要将以前的按钮调整为统一的外观比较麻烦,因此以前经常使用自定义的按钮,而新增的按钮解决了此类问题,可以非常方便的设置整体外观。
本篇分享一个简单轻松的内容: 剖析 Flutter 里的动画技巧 ,首先我们看下图效果,如果要实现下面的动画切换效果,你会想到如何实现?
终于把基本的组件扯完了,真的是多如牛毛。现在让我们来看一下控件如何实现交互 最后会实现一个简单的有点笔触效果的画布,来说明如何使用手势交互。 1.从RaisedButton看事件交互 Flutte
我们都知道 Dart 里一切都是对象,就连基础类型 int 、double 、bool 也都是 class 。
在前面的一些例子中,小伙伴应该看到了好几次 InkWell 这个部件,通过它我们可以实现对一些手势的监听,并实现 MD 的水波纹效果,举个简单的一个例子
我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击和拖动? 我们将使用GestureDetector部件!
所谓时间戳,是指自格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。
我找不到任何显示如何创建IconButton类似于的圆的示例FloatingActionButton。任何人都可以建议创建一个自定义按钮的方式/需要什么FloatingActionButton吗?
左起图一是我业务中的样式,左起图二、三是下方源码展示样式(复制可直接运行,无额外组件引入)
在这篇文章中,将带着大家一起认识什么是StatelessWidget?,什么是StatefulWidget?,以及StatefulWidget和StatelessWidget都有哪些最佳实践?
使用Stack,我们可以将Material和InkWell带到图像上。要拉伸材质,我们将使用Positioned.fill小部件。
Flutter中获取当前日期可以使用DateTime.now()进行获取。now.millisecondsSinceEpoch可以获取到时间戳
在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件。
参考: https://flutter.io/cookbook/gestures/handling-taps/
为了让你的 App 更美观,主题切换已经是一个必不可少的功能了,但如果想在传统的 Android 和 iOS 上分别适配不同的主题相当繁琐。但这一切,在 Flutter 中都非常容易实现。今天我们就来看看,如何在 Flutter 中给你的 App 添加换肤功能。
•icon:通过官方解释可以看得出来,它应该是 AnimatedIcons.xxx•progress:在该字段的上方,注释也给出了解释:动画的进度,值应该是0-1•color:icon 的颜色•size:icon的大小•semanticLabel: 语义标签,不在UI中显示,在辅助功能模式下有用。•textDirection:图标的方向
Flutter提供了DatePicker组件进行时间选择。 日期组件及时间组件代码示例: import 'package:flutter/material.dart'; // 第三方插件,需要提前配置 import 'package:date_format/date_format.dart'; class DatePickerPage extends StatefulWidget { DatePickerPage({Key key}) : super(key: key); @ov
本篇分享一个简单轻松的内容: ThemeExtensions 和 Material3 ,它们都是 Flutter 3.0 中的重要组成部分,相信后面的小知识你可能还没了解过~。
上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List的使用,我们先总结本地图片的引用。今天这篇文章的具体的UI效果如下:
使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效果图。
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下
经过尝试此问题的原因是因为padding值设置的大小超过了外层widget的高度。相关代码:
例如我们需要实现一个功能,修改某个值,修改后给用户一个提示,同时给用户一个撤销该操作的按钮,那么就可以通过 SnackBar 来简单实现。还有就是 SnackBar 可以和 floatingActionButton 完美的配合,弹出的时候不会遮挡住 fab
Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。
在 app 开发中,最重要的部分是,我们需要从服务或者本地获取数据,渲染到我们的挂件中。
怎样才能在我们的flutter应用中对用户输入做出响应?比如我们有个图标,我们想让它支持点击事件,或者在状态改变的时候换一个不同的图标。
国际化方案http://bbs.itying.com/topic/5cfb2a12f322340b2c90e764
1. 弹出提示框 定义模态框组件,代码如下: import 'package:flutter/material.dart'; class MyDialog extends Dialog{ final String title; final String content; // 构造函数赋值 MyDialog({this.title="",this.content=""}); @override Widget build(BuildContext cont
今天将用Flutter的组件来实际布局演练一下,在此之前你需要熟悉Flex布局 1、微信条目的静态布局 这个平时非常常见,而且相对简单,所以是个练手的不错人选 简单分析一下:一共三块,用Row布局,
可能说起 Flutter 绘制,大家第一反应就是用 CustomPaint 组件,自定义 CustomPainter 对象来画。Flutter 中所有可以看得到的组件,比如 Text、Image、Switch、Slider 等等,追其根源都是画出来的,但通过查看源码可以发现,Flutter 中绝大多数组件并不是使用 CustomPaint 组件来画的,其实 CustomPaint 组件是对框架底层绘制的一层封装。这个系列便是对 Flutter 绘制的探索,通过测试、调试及源码分析来给出一些在绘制时被忽略或从未知晓的东西,而有些要点如果被忽略,就很可能出现问题。
在Flutter 应用开发过程中,或多或少的都会涉及到时间选择器相关的内容。Flutter默认提供了DatePicker日期选择器,如果对样式没有特殊的要求,那么可以使用它来进行时间的选择,默认的样式如下所示。
Hero Widget 动画效果 : Hero 通过动画从 源界面 运动到 目标界面 时 , 目标界面 透明度逐渐增加 , 淡入显示 ;
Flutter开发过程中,Drawer控件的使用频率也是比较高的,其实有过移动端开发经验的人来说,Flutter中的Drawer控件就相当于ios开发或者Android开发中的“抽屉”效果,从侧边栏滑出导航菜单。对于Flutter中的Drawer控件的常规用法就不多介绍,网上大把的教程。
看完此文,你一定会会惊讶于Flutter在视图方面是多么优雅 你拿之与Android原生或iOS原生相比,简直天差地别,就像蒸汽时代VS电器时代 下面就是四十行代码能够发挥出的威力,其中每个文字都
在Flutter中,几乎每一个Widget都有一个key。虽然我们在日常的开发中极少会使用到这个key,但是实际上key的存在是很有必要的。那么key到底是什么?它有什么作用?在哪些场景下会必要要使用key呢?
左侧三张图片是我的实际开发中业务界面,用作展示而已,具体源码效果是右边侧的三张图片。
到 https://pub.dev/packages 搜索 http 组件 https://pub.dev/packages/http ;
参考:https://github.com/dylanwuzh/flutter-cupertino-date-picker
你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定义状态小部件来修改图标以使其可以点击。
PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的。
经过上一篇文章的学习,我们大家可以了解到布局相关的组件,但是在实际开发中,我们还需要使用到其他的组件,比如按钮、图片、文本、输入框等等,这些组件都是我们在开发中经常使用的,所以本篇文章我们就来学习一下这些常用组件。
上篇文章Android开发者的Flutter入门(一)讲解了用Flutter开发一个简单的新闻app的大体流程以及主要功能的实现。其中略过了一些功能的实现细节。这篇文章会对这些细节做一些阐述。涉及到的有以下这些点:
卡片效果作为 Material Design 中的一员,Flutter 中 Card 组件自然是要有的。源码注释中是这么描述它的:带有轻微圆角和立面阴影的面板。本文将从源码的角度看一下 Card 组件的构成,并讲述一下 Card 在使用中的一些细小的注意点。
InkResponse 和 InkWell 内部使用了Ink; 可以包裹 不具备事件处理的组件,实现水波纹等点击事件的效果; InkWell 水波纹限制在文本组件之内; InkResponse 水波
持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 2 天,点击查看活动详情
领取专属 10元无门槛券
手把手带您无忧上云