Flutter 学习笔记 (十二)floatingActionButton 类似闲鱼按钮

Flutter 学习笔记 (一)安装及运行
Flutter 学习笔记 (二)Container组件、Text组件、图片组件
Flutter 学习笔记 (三)列表
Flutter 学习笔记 (四)Padding、Row、Column、Expanded组件
Flutter 学习笔记 (五)Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 (六)Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 (七)RaisedBotton、Wrap组件
Flutter 学习笔记 (八)StatefulWidget组件
Flutter 学习笔记( 九)BottomNavigationBar 组件 底部导航
Flutter 学习笔记 (十)AppBar 定义 Tab 切换
Flutter 学习笔记 (十一) Drawer 侧边栏
Flutter 学习笔记 (十二)floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 (十三)TextField、Checkbox、Radio 组件
Flutter 学习笔记 (十四)时间组件
Flutter 学习笔记 (十五)flutter_swiper 轮播组件
Flutter 学习笔记 (十六)Dialog 组件
Flutter 学习笔记 (十七)网络数据请求
Flutter 学习笔记 (十八)路由跳转

闲鱼APP的导航栏如图所示

在这里插入图片描述
FloatingActionButton承载在一个Container中,才能更改图标的大小
FloatingActionButtonLocation选择centerDocked置于底部中央
通过margin进行位置的再调整
decoration中,设置背景颜色,并切成圆形
padding向内留出底色

floatingActionButton: Container(
  height: 60,
  width: 60,
  padding: EdgeInsets.all(5),
  margin: EdgeInsets.only(top:40),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30),
    color: Colors.white,
  ),
  child: FloatingActionButton(     
    backgroundColor: Colors.yellow,     
    child: Icon(Icons.add,size: 50,color: Colors.orange,),
    onPressed: (){
      setState(() {
        _currentIndex=1;
      });
    },
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值