自定义浮动底部导航栏有白色背景颤动

Question

我正在尝试创建一个自定义浮动底部导航栏，我创建了一个小部件并添加了边距以创建浮动效果，但它添加了白色背景。

我需要在没有白色背景的情况下创建它。这是我的代码；

Scaffold(
          bottomNavigationBar: AnimatedBottomBar(
            currentIcon: viewModel.currentIndex,
            onTap: (int index) => viewModel.updateIndex(index),
            icons: viewModel.icons,
          ),
          body: viewModel.pages[viewModel.currentIndex],
        );

然后是动画底部栏

import 'package:flutter/material.dart';
import 'package:woneserve_updated_mobile_app/app/theming/colors.dart';

import 'package:woneserve_updated_mobile_app/models/icon_model.dart';

class AnimatedBottomBar extends StatelessWidget {
  final int currentIcon;
  final List<IconModel> icons;
  final ValueChanged<int>? onTap;
  const AnimatedBottomBar({
    Key? key,
    required this.currentIcon,
    required this.onTap,
    required this.icons,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: Container(
        margin: const EdgeInsets.all(40),
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 2,
              blurRadius: 5,
              offset: const Offset(0, 2), // changes position of shadow
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: icons
              .map(
                (icon) => GestureDetector(
                  onTap: () => onTap?.call(icon.id),
                  child: AnimatedSize(
                    duration: const Duration(milliseconds: 900),
                    child: Icon(
                      icon.icon,
                      size: currentIcon == icon.id ? 26 : 23,
                      color: currentIcon == icon.id ? primaryColor : Colors.black,
                    ),
                  ),
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}

如何在没有白色背景的情况下创建相同的效果？任何帮助，将不胜感激。

Answer 1

我的朋友

为了解决这个问题，你有3种方法。

1. extendBody: true在你的Scaffold.

2. 在 Widget 中使用主题MaterialApp。（见下文）

ThemeData(
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      backgroundColor: Colors.transparent,
    ),
  ),

3. 使用floatingActionButton而不是bottomNavigationBarin Scaffold.（见下文）

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: AnimatedBottomBar(...),
    ...
)