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

 

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