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. Typora语法使用说明

    目录 文本 标题 超链接 锚点 列表 引用 插入图片 脚注 代码 LaTex公式 插入表情 任务列表 高亮 注脚 文本 代码: *斜体* **粗体** ***斜体加粗体*** ~~删除线~~ < ...

  2. caurina缓动类

    一.简单的缓动 一个实例名为box的正方体,开始alpha为0.5,在两秒内移动到x:300 y:100的位置,alpha变为1.import caurina.transitions.Tweener; ...

  3. 微信公众号 分享接口 签名通过 分享无效果(JSSDK自定义分享接口的策略调整)

    为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失 ...

  4. ITIL《信息技术基础架构库》

    一 概述 1. ITIL 自上世纪70年代开始,个人计算机以及计算机网络开始在欧美发达国家普及.随着时间的推移,信息系统的规模越来越大,人们对信息系统的依赖也越来越强.特别是到了80年代,互联网开始普 ...

  5. ASP.Net Core 2.1+ Cookie 登录授权验证【简单Cookie验证】

    介绍 本文章发布于博客园:https://www.cnblogs.com/fallstar/p/11310749.html 作者:fallstar 本文章适用于:ASP.NET Core 2.1 + ...

  6. dom 页面位置和大小,元素的位置和大小,鼠标位置

    dom里面三种跟位置相关的元素 页面位置和大小,元素的位置和大小,鼠标位置 ①window:位置(position):(screenLeft, screenTop) [(screenX, screen ...

  7. UCOSII消息队列

    主结构体 typedef struct os_q { /* QUEUE CONTROL BLOCK */ struct os_q *OSQPtr; /* Link to next queue cont ...

  8. 安装xadmin模板依赖

    ### 安装xadmin模板依赖sudo pip3 install django-crispy-forms django-formtools django-import-export django-r ...

  9. 阿里云ACA—— I

    ACA 阿里云大数据助理工程师 阿里云大学 大数据助理工程师课程笔记分享, 本资料仅供个人学习,不允许用作商业用途,侵权必删 == Alibaba Cloud Certification Associ ...

  10. Spring中抛出异常时,既要要返回错误信息,还要做事务回滚

    情况一:如果没有在程序中手动捕获异常,如下代码事务会回滚 情况二:如果在程序中自已捕获异常未往外抛,如下代码事务不会回滚 如果doDbStuff2()这个操作数据库的方法抛出异常,因为将异常捕获未往外 ...