import 'package:flutter/material.dart';

class FloatingActionButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget _floatingActionButton = FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 0.0,
backgroundColor: Colors.black87,
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)
// ),
); final Widget _floatingActionButtonExtended = FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.add),
label: Text('Add'),
); return Scaffold(
appBar: AppBar(
title: Text('FloatingActionButtonDemo'),
elevation: 0.0,
),
floatingActionButton: _floatingActionButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 80.0,
),
shape: CircularNotchedRectangle(),
),
);
}
}

一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段

效果:

文档:https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

flutter FloatingActionButton组件的更多相关文章

  1. Flutter——FloatingActionButton组件(浮动按钮组件)

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航.     属性名称 属性值 child 子视图,一般为 Icon,不推荐使用文字 ...

  2. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  3. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  4. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  5. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

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

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

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

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

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

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

  9. Flutter BottomNavigationBar 组件

    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNavigationBar ...

随机推荐

  1. Codes: MODERN ROBOTICS Ch.4_基于PoE的正运动学代码实现

    %%1 基于PoE space form 的正运动学求解 % 输入M矩阵.螺旋轴列表Slist(column vector).关节角向量qlist(column vector),输出齐次变换矩阵T f ...

  2. 如何使用MCUXpresso IDE创建一个Cortex-M工程

    拿到Cortex-M开发板之后,就可以开始使用MCUXpresso IDE上手入门.在这个教程中,我们将详细介绍如何基于CMSIS(Cortex微控制器软件接口标准)在MCUXpresso IDE中为 ...

  3. 十大排序代码实现(python)

    目录 冒泡排序 快速排序 简单插入排序 希尔排序 简单选择排序 堆排序 二路归并排序 多路归并排序 计数排序 桶排序 基数排序 写在前面: 参考文章:十大经典排序算法 本文的逻辑顺序基于从第一篇参考博 ...

  4. MySQL将某个数据库下的所有表的存储引擎修改为InnoDB类型语句

    如何将mysql数据库中的MyISAM类型表更改为InnoDB类型的表 改单个表 ALTER TABLE TABLENAME ENGINE=InnoDB; ALTER TABLE TABLENAME ...

  5. 分布式调度平台XXL-JOB源码分析-调度中心

    架构图 上图是我们要进行源码分析的2.1版本的整体架构图.其分为两大块,调度中心和执行器,本文先分析调度中心,也就是xxl-job-admin这个包的代码. 关键bean 在application.p ...

  6. js与jquery中html() text() val()中的区别

    首先html() text() val() 是jquery方法. 1.html()取得内容可以包含标签. 2.text()取得内容为元素文本内容. 3.val()只有value属性的元素才能使用该方法 ...

  7. windows部署tomcat

    一.下载相应的JDK以及tomcat的版本 JDK:jdk-8u131-windows-x64 tomcat:apache-tomcat-8.5.23-windows-x64.zip 二.JDK的安装 ...

  8. IDEA设置提示生成序列化ID

    背景: 实现Serializable接口的类,没有提示生成序列化ID 解决问题: 1.FIle->Settings->Editor->inspections 2.点击java-> ...

  9. easyui181版本使用记录

    easyui181版本下载地址 简单java+easyui181版本demo下载 注意前端页面的ajax请求路径对应后端 如果再加强样式可使用adminLTE

  10. Bzoj 4147: [AMPPZ2014]Euclidean Nim(博弈)

    4147: [AMPPZ2014]Euclidean Nim Time Limit: 1 Sec Memory Limit: 256 MB Description Euclid和Pythagoras在 ...