问在颤振中隐藏在底部导航后面的浮动动作按钮
EN

Stack Overflow用户

提问于 2022-10-08 22:14:04

回答 1查看 94关注 0票数 0

在我的颤振应用程序中，我正在使用页面上的浮动动作按钮。我怎样才能让它显示在库比提拉巴之上？这是截图。看上去的样子

下面是我的Widget构建的代码片段：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: const Text('Manager Jobs'),
        backgroundColor: CustomColors.wrkioBlue,
      ),
      body: Padding(padding: EdgeInsets.only(bottom: 80),
        child: Container(
          height: MediaQuery.of(context).size.height - 100,
          child: StreamBuilder<List<DocumentReference>>(
              stream: _getJobReferences(),
              builder: (context, jobRefsSnapshot) {
                if (jobRefsSnapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                } else {
                  if (jobRefsSnapshot.hasData) {
                    final jobRefs = jobRefsSnapshot.data!;
                    return StreamBuilder<List<Job>>(
                        stream: _getManagerJobs(jobRefs),
                        builder: (context, jobsSnapshot) {
                          if (jobsSnapshot.connectionState == ConnectionState.waiting) {
                            return const CircularProgressIndicator();
                          } else {
                            if (jobsSnapshot.hasData) {
                              final jobs = jobsSnapshot.data!;
                              return ListView(
                                children: jobs.map((job) => jobRow(context, job)).toList(),
                              );
                            } else if (jobsSnapshot.hasError) {
                              return Text('${jobsSnapshot.error}');
                            }
                            return const CircularProgressIndicator();
                          }
                        }
                    );
                  } else if (jobRefsSnapshot.hasError) {
                    return Text('${jobRefsSnapshot.error}');
                  }
                  return const CircularProgressIndicator();
                }
              }),
        ),
      ),
      // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked ,
      floatingActionButton: FloatingActionButton.extended(
        icon: Icon(Icons.add, color: Colors.white,),
        label: Text('New'),
        backgroundColor: CustomColors.wrkioBlue,
        onPressed: () {
          // Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => CreateJob()));
          Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(builder: (context) => CreateJob()));
        },
      ),
    );
  }

我怎样才能让它显示标签栏呢？我需要设置什么安全区域吗？

flutter

button

action

hidden

回答 1

Stack Overflow用户

发布于 2022-10-09 03:08:59

如果你还没有找到解决方案，你可以试试这个。在一个单独的小部件中创建一个自定义floatingActionButton，这样您就可以定制它，并给它一个空间，您可以根据自己的喜好来调整它。

//custom floating action button

class CustomFloatingActionButton extends StatelessWidget {
  const AppFloatingActionButton({Key? key, required this.onPressed})
      : super(key: key);

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 64 //you can adjust this to the height you want),
          child: FloatingActionButton(
            onPressed: onPressed,
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}

然后您可以使用它来替换浮动操作按钮，如下所示

    return Scaffold(
    appBar: AppBar()
      body: Body(),
      floatingActionButton: CustomFloatingActionButton(
            onPressed: (){},
          ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniEndFloat,
    );