（14）Flutter FloatingActionButton

最新推荐文章于 2024-05-13 22:46:08 发布

安果移不动

最新推荐文章于 2024-05-13 22:46:08 发布

阅读量312

点赞数

分类专栏： 042Flutter 文章标签： Flutter FloatingActionButton 定制圆形到矩形扩展样式

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/113487893

版权

042Flutter 专栏收录该内容

135 篇文章 26 订阅

订阅专栏

这个是怎么实现的呢

源码

import 'package:flutter/material.dart';

class FloatingActionButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _floatingActioButoon = FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
      elevation: 0.0,
      backgroundColor: Colors.greenAccent,
      //修改为矩形
      // shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
    );
    /*另一种扩展*/
    final _floatingActioButoonExtended = FloatingActionButton.extended(
      onPressed: () {},
      label: Text("add"),
      icon: Icon(Icons.add),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtonDemo"),
        elevation: 0.0,
      ),
      floatingActionButton: _floatingActioButoon,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 80.0,
        ),
        shape: CircularNotchedRectangle(),
      ),
    );
  }
}

还有actionButton可以弄的像一个按钮一样

import 'package:flutter/material.dart';

class FloatingActionButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _floatingActioButoon = FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
      elevation: 0.0,
      backgroundColor: Colors.greenAccent,
      //修改为矩形
      // shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
    );
    /*另一种扩展*/
    final _floatingActioButoonExtended = FloatingActionButton.extended(
      onPressed: () {},
      label: Text("add"),
      icon: Icon(Icons.add),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtonDemo"),
        elevation: 0.0,
      ),
      floatingActionButton: _floatingActioButoonExtended,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 80.0,
        ),
        shape: CircularNotchedRectangle(),
      ),
    );
  }
}