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. GIT讲解

    一.什么是Git: Git是目前世界上最先进的分布式版本控制系统. 二.为什么要用版本控制系统: 1.更方便的存储版本 2.恢复之前的版本 3.更方便的进行对比 4.协同合作 三.如何安装GIT: 1 ...

  2. Spring Boot 五种热部署方式

    [推荐]2019 Java 开发者跳槽指南.pdf(吐血整理)>>> 1.模板热部署 在SpringBoot中,模板引擎的页面默认是开启缓存的,如果修改了页面的内容,则刷新页面是得不 ...

  3. 物流管理系统(SSM+vue+shiro)【前后台】

    一.简单介绍项目 该项目是属于毕业设计项目之一,有前台的用户下单.有司机进行接单.有管理员进行操作后台,直接进入主题 毕设.定制开发 联系QQ:761273133 登录主页: 手机号码+验证码登录 或 ...

  4. 接口标记为@ResponseBody却不进入ResponseBodyAdvice

    一.背景: 我们的接口为了统一,在ResponseBodyAdvice中对返回值做统一处理,默认添加了errorNo和errorInfo字段返回. 最近同事改接口代码的时候,发现接口返回值是空的.乍一 ...

  5. (三) Docker 常用操作与CentOS7 防火墙命令

    参考并感谢 Docker 常用命令 https://docs.docker.com/engine/reference/commandline/docker/ Docker 登录docker账户 doc ...

  6. HTTP API 认证授权术

    原文:https://coolshell.cn/articles/19395.html 我们知道,HTTP是无状态的,所以,当我们需要获得用户是否在登录的状态时,我们需要检查用户的登录状态,一般来说, ...

  7. asBroadcastStream

    StreamSubscription sc = StreamSubscription(); Stream s = Stream(); sc.addStream(s); var bs = sc.stre ...

  8. 借助openpyxl处理excel

    一次处理excel中,原计划是借助excel中自带的工具进行处理,然而看到需要处理的列要达到30+,后来放弃了,用Python处理或许是一个不错的选择. 需求: 表格中每一列数据都是一个随机值,但是已 ...

  9. 过渡属性transition

    过渡属性:使元素变化过程可见 transition: all 1s;元素所有变化过程都可见 transition: 1s;元素所有变化过程都可见 transition: 指定属性 2s 1s;指定属性 ...

  10. FPM-OVP增强实例-银行账户

    本文是基于NWBC银行账户信息进行增强,相关过程如下: 1.定位需要增强的界面 首先登陆SAP-GUI(尽量EN登陆,ZH可能乱码),输入TCODE:NWBC跳转到浏览器界面,新建银行账户: 注意上图 ...