如何在 Flutter dart 的 ListView 中添加 floatingactionbutton

Question

我想在右下角的 ListPage 中添加一个浮动操作按钮。
我尝试添加它，但出现错误或者它正在变成死代码。
将在该浮动操作按钮上实现按下以创建用户，这将反映在列表视图页面中。

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(new AdminPage());

class AdminPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Admin Dashboard',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Admin Dashboard'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: ListPage(),
    );
  }
}

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  Future _data;
  Future getPosts() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection("admins").getDocuments();
    return qn.documents;
  }

  @override
  Widget build(BuildContext context) {
    Future getPosts() async {
      var firestore = Firestore.instance;
      QuerySnapshot qn = await firestore.collection("admins").getDocuments();
      return qn.documents;
    }

    navigateToDetail(DocumentSnapshot post){
      Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(post: post,)));
    }

    @override
    void initState(){
      super.initState();
      _data = getPosts();
    }

    return Container(
      child: FutureBuilder(
        future: _data,
          builder: (_, snapshot){

        if(snapshot.connectionState == ConnectionState.waiting){
          return Center(
            child: Text("Loading..."),
          );
        } else {
          return ListView.builder(

              itemCount: snapshot.data.length,
              itemBuilder: (_, index){

                return  ListTile(
                  title: Text(snapshot.data[index].data["email"]),
                  onTap: () => navigateToDetail(snapshot.data[index]),
                );
          });
        }
      }),
    );
  }
}


class DetailPage extends StatefulWidget {

  final DocumentSnapshot post;
  DetailPage({this.post});

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title : Text(widget.post.data["name"]),
      ),

    body: Container(
      child:Card(
        child: ListTile(
          title:Text(widget.post.data["email"]),
          subtitle: Text(widget.post.data["name"]),
        ),
      ),

    ),
    );
  }
}

屏幕图像如下

Answer 1

您可以在 Scaffold

上添加 floatingActionButton 参数

return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: ListPage(),
      floatingActionButton: FloatingActionButton(
          onPressed: () =>{},
          child: const Icon(Icons.add),
        ),
    );

如何在 Flutter dart 的 ListView 中添加 floatingactionbutton

How do I add floatingactionbutton in my ListView in Flutter dart

dart

floating-action-button

flutter

google-cloud-firestore