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的更多相关文章

  1. [转]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 ...

  2. Flutter 基础组件:Widget简介

    概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...

  3. flutter系列之:构建Widget的上下文环境BuildContext详解

    目录 简介 BuildContext的本质 BuildContext和InheritedWidget BuildContext的层级关系 总结 简介 我们知道Flutter中有两种Widget,分别是 ...

  4. 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 ...

  5. Flutter常用组件(Widget)解析-Scaffold

    实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...

  6. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

  7. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  8. Flutter视图基础简介--Widget、Element、RenderObject

    前言:Flutter官方文档里的一句话:you build your UI out of widgets(使用Flutter开发UI界面时,都是使用Widget),然而,Widget并不是我们真正看到 ...

  9. 【Flutter学习】之Widget数据共享之InheritedWidget

    一,概述 业务开发中经常会碰到这样的情况,多个Widget需要同步同一份全局数据,比如点赞数.评论数.夜间模式等等.在安卓中,一般的实现方式是观察者模式,需要开发者自行实现并维护观察者的列表.在flu ...

随机推荐

  1. 记一次stm8l程序跑飞

    项目使用stm8l051f3做主控,CC2500做数据接收,不发送. 跑飞的现象就是,刚开始能运行,经过一段未知长度的时间,有可能是3分钟,有可能是30分钟,指示灯不再闪烁,中断按键单片机无反应. 接 ...

  2. 协议——VGA

    VGA(Video Graphics Array)是IBM在1987年随PS/2机一起推出的一种视频传输标准,具有分辨率高.显示速率快.颜色丰富等优点,在彩色显示器领域得到了广泛的应用.不支持热插拔, ...

  3. ByteBuf源码

    ByteBuf是顶层的抽象类,定义了用于传输数据的ByteBuf需要的方法和属性. AbstractByteBuf 直接继承ByteBuf,一些公共属性和方法的公共逻辑会在这里定义.例如虽然不同性质的 ...

  4. 利用ime-mode设置文本框只能输入正整数

    html: <input type="text" id="packageratio"style="ime-mode: disabled;&quo ...

  5. Computational biological hypothesis generation using "-omics" data

    Computational biological hypothesis generation using "-omics" data Forming biological hypo ...

  6. 【洛谷 P1659】 [国家集训队]拉拉队排练(manacher)

    题目链接 马拉车+简单膜你 #include <cstdio> #include <cstring> #include <algorithm> using name ...

  7. JS权威指南读书笔记(六)

    第十五章 脚本化文档   1 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 2 文档节点的部分层次结构 Text和CDATASection都是characterData的子 ...

  8. Http 请求头包含哪些信息?

    协议头 说明 示例 状态 Accept 可接受的响应内容类型(Content-Types). Accept: text/plain 固定 Accept-Charset 可接受的字符集 Accept-C ...

  9. Programming Principles and Practice Using C++ Notes2

    第三章对象.类型和值 对象:用来保存一个指定类型值的一些内存单元. 类型:定义一组可能的值与一组运算(对于一个对象). 值:根据一个类型来解释的内存中的一组比特. #include <iostr ...

  10. <P>标签是什么?怎么用!

    <P>标签它是一个段落标签,它和<br>标签不一样.会自行起一行段落,并且可以作为一个盒子来使用.可以单独定义它. 比如下图: <p>这个就是一个段落</p& ...