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,

        ),

      ),

    );

  }

}

flutter widget---->FloatingActionButton的相关教程结束。