(14)Flutter FloatingActionButton

这个是怎么实现的呢

源码

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(),
      ),
    );
  }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章