Flutter 中浮动操作按钮的放置

Question

我正在制作这样的屏幕视图。我想要的是，当它在医学选项卡上时，它应该在角落显示一个浮动操作按钮，如图所示。

对于历史选项卡，它应该会消失。像这张照片一样

我的代码是：

import 'package:epicare/HomeScreen.dart';
import 'package:flutter/material.dart';

class Medicines extends StatefulWidget {
  @override
  _MedicinesState createState() => _MedicinesState();
}

class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xffE5E0A1),
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Medicine",
          style: TextStyle(
            fontSize: 15.0,
            color: Colors.black,
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.normal,
          ),
        ),
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return HomeScreen();
                },
              ),
            );
          },
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 32,right: 32,left: 32),
        child: Column(
          children: [
            // give the tab bar a height [can change height to preferred height]
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: const Color(0xffE5E0A1),
                borderRadius: BorderRadius.circular(
                  17.0,
                ),
                border: Border.all(
                    width: 1.0, color: const Color(0xff2f363d)),
              ),
              child: TabBar(
                controller: _tabController,
                // give the indicator a decoration (color and border radius)
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    17.0,
                  ),
                  color: Colors.black,
                ),
                labelColor: const Color(0xffd4d411),
                unselectedLabelColor: Colors.black,
                tabs: [
                  // first tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'Medicine',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),

                  // second tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'History',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ],
              ),
            ),
            // tab bar view her
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  // first tab bar view widget
                  Column(
                    children: [
                      Image.asset(("assets/images/Medicine-amico.png")),
                      SizedBox(
                        height: 20,
                      ),
                      Text(
                        'Hurray! You don\'t have any pending medicines to take!',
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: const Color(0x78000000),
                          height: 1.4285714285714286,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],

                  ),

                  // second tab bar view widget
                  Column(
                    children: [
                      Image.asset(("assets/images/Time management-pana.png")),
                      Text(
                        'You have no data here!\nPlease complete your prescriptions',
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: const Color(0x78000000),
                          height: 1.4285714285714286,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   child: Icon(
      //     Icons.add,
      //     size: 40,
      //   ),
      //   backgroundColor: const Color(0xffd4d411),
      //   onPressed: () {},
      // ),
    );
  }

  Widget addmedicine() {
    return FloatingActionButton(
        child: Icon(
            Icons.add,
            size: 40,
          ),
          backgroundColor: const Color(0xffd4d411),
          onPressed: () {},
    );
  }
}

请帮我解决我应该如何放置浮动操作按钮 提前谢谢你:)

Answer 1

添加一个监听器来更新当前选择的选项卡以显示 FloatingActionButton，或者一个空的 Container。

class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
  late TabController _tabController;
  var _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this)
      ..addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
      });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: ...,
      body: ...,
      floatingActionButton: _selectedIndex > 0 
        ? Container()
        : FloatingActionButton(
          child: Icon(
            Icons.add,
            size: 40,
          ),
          backgroundColor: const Color(0xffd4d411),
          onPressed: () {},
      ),
    );
  }
}

这种方法保留了 FloatingActionButton 的 hero 属性：

Answer 2

You can use this code. 我制作了 Stack 小部件并仅在医学页面上添加了浮动按钮 只需在屏幕上复制并粘贴此代码

class Medicines extends StatefulWidget {
  @override
  _MedicinesState createState() => _MedicinesState();
}

class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xffE5E0A1),
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Medicine",
          style: TextStyle(
            fontSize: 15.0,
            color: Colors.black,
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.normal,
          ),
        ),
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return HomeScreen();
                },
              ),
            );
          },
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 32, right: 32, left: 32),
        child: Column(
          children: [
            // give the tab bar a height [can change height to preferred height]
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: const Color(0xffE5E0A1),
                borderRadius: BorderRadius.circular(
                  17.0,
                ),
                border: Border.all(width: 1.0, color: const Color(0xff2f363d)),
              ),
              child: TabBar(
                controller: _tabController,
                // give the indicator a decoration (color and border radius)
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    17.0,
                  ),
                  color: Colors.black,
                ),
                labelColor: const Color(0xffd4d411),
                unselectedLabelColor: Colors.black,
                tabs: [
                  // first tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'Medicine',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),

                  // second tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'History',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ],
              ),
            ),
            // tab bar view her
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  // first tab bar view widget
                  Stack(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Column(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    FloatingActionButton(onPressed: null)
                                  ]),
                            ]),
                      ),
                      Column(
                        children: [
                          Image.asset(("assets/images/Medicine-amico.png")),
                          SizedBox(
                            height: 20,
                          ),
                          Text(
                            'Hurray! You don\'t have any pending medicines to take!',
                            style: TextStyle(
                              fontFamily: 'Montserrat',
                              fontWeight: FontWeight.w600,
                              fontSize: 14,
                              color: const Color(0x78000000),
                              height: 1.4285714285714286,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ],
                  ),

                  // second tab bar view widget
                  Column(
                    children: [
                      Image.asset(("assets/images/Time management-pana.png")),
                      Text(
                        'You have no data here!\nPlease complete your prescriptions',
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: const Color(0x78000000),
                          height: 1.4285714285714286,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   child: Icon(
      //     Icons.add,
      //     size: 40,
      //   ),
      //   backgroundColor: const Color(0xffd4d411),
      //   onPressed: () {},
      // ),
    );
  }

  Widget addmedicine() {
    return FloatingActionButton(
      child: Icon(
        Icons.add,
        size: 40,
      ),
      backgroundColor: const Color(0xffd4d411),
      onPressed: () {},
    );
  }
}