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. PHP openssl DES加解密

    不说废话上代码 加密 $str_padded = 'android'; //要加密的字符串 $iv = "12345678"; 偏移值 cbc必填 "\x01\x02\x ...

  2. 个性化排序算法实践(四)——GBDT+LR

    本质上GBDT+LR是一种具有stacking思想的二分类器模型,所以可以用来解决二分类问题.这个方法出自于Facebook 2014年的论文 Practical Lessons from Predi ...

  3. 【Python】使用Python压缩文件/文件夹

    [Python压缩文件夹]导入“zipfile”模块 def zip_ya(startdir,file_news): startdir = ".\\123" #要压缩的文件夹路径 ...

  4. 《CoderXiaoban》第九次团队作业:Beta冲刺与验收准备2

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 Coderxiaoban团队 作业学习目标 (1)掌握软件黑盒 ...

  5. 《逆袭团队》第七次作业:团队项目设计完善&编码

    实验十一 团队作业7:团队项目设计完善&编码 内容 项目 软件工程 任课教师博客主页链接 作业链接地址 团队作业7:团队项目设计完善&编码 团队名称 逆袭团队 具体目标 (1)完善团队 ...

  6. LG2662 牛场围栏 和 test20181107 数学题

    P2662 牛场围栏 题目背景 小L通过泥萌的帮助,成功解决了二叉树的修改问题,并因此写了一篇论文, 成功报送了叉院(羡慕不?).勤奋又勤思的他在研究生时期成功转系,考入了北京大学光华管理学院!毕业后 ...

  7. 适合于做项目与团队管理的工具(Choerodon)

    官网链接:http://choerodon.io/zh/ 此处不做太多的介绍,需要了解的朋友进入官网进行查看. Choerodon猪齿鱼开源多云技术平台,是基于开源技术Kubernetes,Istio ...

  8. python 赋值与深浅拷贝

    https://www.cnblogs.com/Eva-J/p/5534037.html

  9. js模拟滚动条滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Ubuntu18.04下安装Sublime Text3并解决不能输入中文

    Ubuntu18.04下安装Sublime Text3并解决不能输入中文! 废话不多说,直接按顺序执行下面命令开始安装! wget -qO - https://download.sublimetext ...