flutter widget---->FloatingActionButton

在Flutter中说起Button，floatingActionButton用的也非常的多。今天我们就来学习一下。

Simple Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

the result:

默认情况下它会位于右下角，我们可以通过Scaffold的floatingActionButtonLocation属性来指定它的位置。这里列举centerDocked和centerFloat两个值，还有些其它的属性值。

• centerDocked

• centerFloat

Complex Example

如果有bottomNavigationBar，我们想要把floatingActionButton嵌入到bottomNavigationBar中。我们要怎么做呢，其实上述的floatingActionButtonLocation的值为centerDocked或者endDocked加上设置BottomAppBar的shape属性就可以做到那种嵌入的效果。

完整的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {}),
              IconButton(icon: Icon(Icons.search), onPressed: () {}),
            ],
          ),
          shape: CircularNotchedRectangle(),
          color: Colors.blueGrey,
        ),
      ),
    );
  }
}