如何在Flutter dart的ListView中添加floatactionbutton

Question

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

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

您可以在脚手架上添加floatingActionButton参数

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

Answer 2

• 谢谢！但是现在出现错误。