如何在我的代码中添加浮动操作按钮答案

【问题标题】：How can I add the floating action button in my code如何在我的代码中添加浮动操作按钮
【发布时间】：2019-11-27 05:33:37
【问题描述】：

我正在尝试在我的颤振应用程序中添加浮动操作按钮，由于只能实现一个孩子，我无法弄清楚我应该将浮动操作按钮的代码放在哪里。

我可以将它作为子项放在列中，但它不会出现在屏幕的左下角。我还尝试创建另一个类，然后将其放入脚手架小部件中，但我的 _favCity 将不包含在内

....
class _favCity extends State<favCity> {
  String city1, city2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Email Login"),
        centerTitle: true,
      ),
      backgroundColor: Colors.cyan,
      body: Container(
        margin: EdgeInsets.all(40.0),
        color: Colors.brown,
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10.0),
              //color: Colors.white,
              child: TextField(
                decoration: new InputDecoration(
                  labelText: "Enter City 1",
                  fillColor: Colors.orange,
                  border: new OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                ),
                onSubmitted: (String userInput) {
                  setState(() {
                    city1 = userInput;
                  });
                },
              ),
            ),
            Container(
              padding: EdgeInsets.all(10.0),
             // color: Colors.white,
              child: TextField(
                decoration: InputDecoration(
                  labelText: "Enter city 2",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                  fillColor: Colors.orange,
                ),
                onChanged: (String UserInput) {
                  setState(() {
                    city2 = UserInput;
                  });
                },
              ),
            ),
            Text("$city1 Is better than $city2"),

          ],
        ),

      ),
    );
  }
}

【问题讨论】：

标签： flutter dart scaffold

【解决方案1】：

floating action button 也是 widget，可以使用以下代码放置在应用中。

import 'package:flutter/material.dart';

class FAButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Button Example'),
      ),
      body: Center(
        child: Text('Floating Action Button Screen'),
      ),
      //FAB is a property of the `Scaffold` Widget
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        //Widget to display inside Floating Action Button, can be `Text`, `Icon` or any widget.
        onPressed: () {
          //Code to execute when Floating Action Button is clicked
          //...
        },
      ),
    );
  }
}

有关 FAB 的更多参考或进一步自定义它，请参阅此Link

【讨论】：

【解决方案2】：

对于 floatingActionButton 你可以看到这个document 。

我这样用没问题：

          floatingActionButton: FloatingActionButton(
            backgroundColor: Theme.of(context).primaryColor,
            child: Icon(
              Icons.comment,
              color: Colors.white,
            ),
            onPressed: () {
              // do something
            },
          ),

【讨论】：

【解决方案3】：

要在你的 Scaffold 中添加 FloatingActionButton，你需要使用这个：

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Container() // something you want to put in the body
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.check),
            onPressed: () { // ... function you want use when on pressed }
            backgroundColor: Color(0xFFE57373),
        ),
        // if you want change position of floating action button is here
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
}

【讨论】：