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. 适合公司和个人的目标管理方法:OKR!

    1.定义   OKR就是Objectives and Key Results的简称,包括目标(Objectives)和关键结果(Key Results)两个要素.   2.目的    就公司和团队而言 ...

  2. 微信小程序~基础组件

    (1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视 ...

  3. Union-Find(并查集): Dynamic Connectivity 问题

    设计算法一般所使用的方法过程 什么是Dynamic connectivity 我们的problem就是支持这两种操作: Union与connected query Example 问题是两个objec ...

  4. Spring源码窥探之:BeanPostProcessor

    Spring的Bean后置处理器 1. 实体类 /** * @author 70KG * @Title: Train * @Description: * @date 2018/7/23下午11:31 ...

  5. c语言中,如果将无符号数转换为有符号数

    在使用ti的adc芯片ads1259时,芯片是24为数据格式保存的,其中最高位是符号位,因此可以理解为是有符号数据,但是在嵌入式系统中,没有直接24位的变量,因此使用32的无符号先保存24位的数据. ...

  6. bzoj1784: [Usaco2010 Jan]island

    现在居然出现一道题只有\(pascal\)题解没有\(C++\)题解的情况,小蒟蒻要打破它. 思维题:分类讨论 回归正题,此题十分考验思维,首先我们要考虑如何把不会走的地方给填上,使最后只用求一遍这个 ...

  7. 01-学习vue前的准备工作(let和const)

    es6语法:let和const es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效 <!DOCYTPE html> <ht ...

  8. (10)打鸡儿教你Vue.js

    事件处理器 <div id="app"> <button v-on:click="counter += 1">增加 1</butt ...

  9. POJ1635 Subway tree systems ——(判断树的同构,树的最小表示法)

    给两棵有根树,判断是否同构.因为同构的树的最小表示法唯一,那么用最小表示法表示这两棵树,即可判断同构.顺便如果是无根树的话可以通过选出重心以后套用之前的方法. AC代码如下: #include < ...

  10. 查看CPU占用工具

    recording_5492_1.jfr jcmd 5942 JFR.start delay=1s duration=200s name=serverRecording filename=./reco ...