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. java基础(10)---stream流

    一.stream的应用场景 for遍历的冗余场景:  stream的写法: 二.获取Stream流的常用方式 三.Stream的map映射方法 更简单的写法: 四.Stream的filter过滤方法 ...

  2. Druid Spring Boot Starter 从配置到简单运行 -解决zone不匹配 -解决dataSource加载失败

    Druid Spring Boot Starter 中文 | English Druid Spring Boot Starter 用于帮助你在Spring Boot项目中轻松集成Druid数据库连接池 ...

  3. postscript打印机语言

    http://tongxinmao.com/Article/Detail/id/257

  4. solrconfig.xml配置文件

    部分来自http://www.jianshu.com/p/8cf609207497 一.总览 solr的配置重要的有三个:solr.xml.solrConfig.xml.schema.xml solr ...

  5. Linux 物理机虚拟化

    前言 我有一台安装了 RHCA 资源的磁盘,然而每次开机时需要切换启动项为该磁盘.于是我想将它实现物理虚拟化. 工具 Windows 10 RHCA Disk Virtualbox 5.1 Virtu ...

  6. pycharm注册使用

    先在PyCharm官网下载安装包 链接:https://www.jetbrains.com/pycharm/download/#section=linux 选择平台为Linux,可以看到当前版本为20 ...

  7. 华东交通大学 2019 I 不要666 数位dp进阶

    Problem Description 题库链接 666是一个网络用语,用来形容某人或某物很厉害很牛.而在西方,666指魔鬼,撒旦和灵魂,是不吉利的象征.所以邓志聪并不喜欢任何与6有关的数字.什么数字 ...

  8. learning java AWT 绝对定位

    import javax.swing.*; import java.awt.*; public class NullLayoutTest { Frame f = new Frame("测试窗 ...

  9. Bzoj 2440: [中山市选2011]完全平方数(莫比乌斯函数+容斥原理+二分答案)

    2440: [中山市选2011]完全平方数 Time Limit: 10 Sec Memory Limit: 128 MB Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平 ...

  10. python中isinstance函数

    1.描述 python中isinstance()函数,是python中的一个内置函数,用来判断一个函数是否是一个已知的类型,类似type(). 2.语法 isinstance(object,class ...