[Flutter] Create a Customer widget
For example, we want to have to button, looks similar to FloatingActionButton:
But in the doc, it says to it is recommend to have only one floatingActionButton pre Application.
So it is good idea to implement a similar one and learn how to build custom widget.
First thing first, since Flutter source code are very easy to read, we can check how FloatActionButton are implemented.
Actually we can see it is implement as 'RawMateriaButton'.
class RoundIconButton extends StatelessWidget {
RoundIconButton({@required this.icon, @required this.onPressed}); final IconData icon;
final Function onPressed; @override
Widget build(BuildContext context) {
return RawMaterialButton(
child: Icon(icon),
elevation: 6.0,
onPressed: onPressed,
shape: CircleBorder(),
fillColor: Color(0XFF4C4F5E),
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
);
}
}
Usage:
RoundIconButton(
icon: FontAwesomeIcons.plus,
onPressed: () {
setState(() {
age++;
});
},
),
[Flutter] Create a Customer widget的更多相关文章
- [转]simple sample to create and use widget for nopcommerce
本文转自:http://badpaybad.info/simple-sample-to-create-and-use-widget-for-nopcommerce Here is very simpl ...
- Flutter 基础组件:Widget简介
概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...
- flutter系列之:构建Widget的上下文环境BuildContext详解
目录 简介 BuildContext的本质 BuildContext和InheritedWidget BuildContext的层级关系 总结 简介 我们知道Flutter中有两种Widget,分别是 ...
- Create a Qt Widget Based Application—Windows
This turtorial describes how to use Qt Creator to create a small Qt application, Text Finder. It is ...
- Flutter常用组件(Widget)解析-Scaffold
实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...
- Flutter常用组件(Widget)解析-ListView
一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...
- Flutter常用组件(Widget)解析-Container
一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...
- Flutter视图基础简介--Widget、Element、RenderObject
前言:Flutter官方文档里的一句话:you build your UI out of widgets(使用Flutter开发UI界面时,都是使用Widget),然而,Widget并不是我们真正看到 ...
- 【Flutter学习】之Widget数据共享之InheritedWidget
一,概述 业务开发中经常会碰到这样的情况,多个Widget需要同步同一份全局数据,比如点赞数.评论数.夜间模式等等.在安卓中,一般的实现方式是观察者模式,需要开发者自行实现并维护观察者的列表.在flu ...
随机推荐
- Java开发笔记(一百二十二)AWT选择框
前面介绍了两种文本输入框的用法,不过实际应用很少需要用户亲自文字,而是在界面上列出几个选项,让用户勾勾点点完成选择,这样既方便也不容易弄错.依据选择的唯一性,可将选项控件分为两类:一类是在方框中打勾的 ...
- 47 容器(六)——HashMap
HashMap的概念 HashMap底层实现了哈希表,这是一种非常重要的数据结构,对于以后我们理解很多技术都有帮助,例如 redis数据库的核心技术和HashMap一样,因此,非常有必要让大家理解. ...
- WAMP集成环境虚拟路径修改
只需要改httpd.conf这一个文件就好了. 1.单击右下角wamp图标如下图打开httpd.conf,或者从文件夹打开httpd.conf.
- 深度学习-LSTM与GRU
http://www.sohu.com/a/259957763_610300此篇文章绕开了数学公式,对LSTM与GRU采用图文并茂的方式进行说明,尤其是里面的动图,让人一目了然.https://zyb ...
- 2019牛客国庆集训派对day3
E. Grid 大意: 给定$n\cdot m$个点的图, 初始无边, $q$个操作, $(1,a,b)$表示第$a$列到第$b$列全连起来, $(2,a,b)$表示把第$a$行到第$b$行全连起来, ...
- TeX 家族(TeX, pdfTeX, XeTeX, LuaTeX, LaTeX, pdfLaTeX, XeLaTeX …)
TeX 家族 带有 TeX 的词,仅仅是本文就已经提到了 TeX, LaTeX, XeLaTeX.通常中国学生面对不了解意思的一群形近单词,都会有一种「本能的恐惧」(笑~).因此,「大神们」在为新手介 ...
- C# vb .net实现发光效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的发光效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- 10 查询字符串,X字段必须包含(不包含)XX;_all原理
指定某个字段,必须要包含XX字符 GET /beauties/my/_search?q=Name:Chang Wei 搜出 某个字段不包含XX字符 的所有内容 GET /beauties/my/_ ...
- ColdFusion 编写WebService 示例
1.开发 Web Services,编写cfcdemo.cfc组件,代码如下: <cfcomponent style ="document" namespace = &quo ...
- 设置body样式问题
如果我给body设置成一个宽高为200px的正方形,背景为红色,但是整个html也变成了红色,而且是整个浏览器屏幕都是红的,怎么来处理,如下 给html单独设置一个背景颜色,比如为白色#fff,在给b ...