如何在Flutter dart的ListView中添加浮动操作按钮

fnatzsnv  于 2022-12-19  发布在  Flutter
关注(0)|答案(2)|浏览(214)
  • 我想在右下角的ListPage中添加一个floatingactionbutton。
  • 我尝试添加它,但我得到错误或它正在成为一个死代码。
  • 将在浮动操作按钮上实现on按下以创建用户,并将反映在列表视图页面中。
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"]),
        ),
      ),

    ),
    );
  }
}
  • 屏幕图像可在

    下找到
uubf1zoe

uubf1zoe1#

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

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

brc7rcf02#

您可以通过将FloatingActionButton Package 到Transform.translate中来在列表视图中添加FAB:

floatingActionButton:Transform.translate(        
        offset: const Offset(-10, -70),
        child: FloatingActionButton(
          onPressed: () =>{},
          child: const Icon(Icons.add),
        ),
),

相关问题