FloatingActionButton 悬浮按钮示例

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "FloatingActionButton 示例",
      home: Scaffold(
        appBar: AppBar(
          title: Text("FloatingActionButton 示例"),
        ),
        body: Center(
          child: Text(
            "FloatingActionButton",
            style: TextStyle(fontSize: 28.0),
          ),
        ),
        floatingActionButton: Builder(
          builder: (BuildContext context) {
            return FloatingActionButton(
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("你点击了 FloatingActionButton"),
                ));
              },
              child: const Icon(Icons.add),
              tooltip: "请点击 FloatingActionButton",
//              前景色
              foregroundColor: Colors.white,
//              后景色
              backgroundColor: Colors.blue,
//              未点击的阴影值
              elevation: 7.0,
//              点击时的阴影值
              highlightElevation: 14.0,
              mini: false,
              shape: CircleBorder(),
              isExtended: false,
            );
          },
        ),
//        居中放置
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }
}