CODEWITHSUNDEEP
flutterdart
Patrick Obafemi
Patrick Obafemi

Reputation: 1066

Custom floating bottom navigation bar has white background flutter

I am trying to create a custom floating bottom navigation bar and i create a widget and added a margin to create a floating effect but it adds a white background. enter image description here

I need to create it without the white background. Here is my code;

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

Then the animated bottom bar

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(),
        ),
      ),
    );
  }
}

How can i create the same effect without the white background? Any help would be appreciated.

Upvotes: 3

Views: 5830

Answers (3)

Iman Ghasemi Arani
Iman Ghasemi Arani

Reputation: 92

my friend

for solve this problem you have 3 way.

  1. use extendBody: true in your Scaffold.

  2. use theme in MaterialApp Widget.(see below)

ThemeData(
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      backgroundColor: Colors.transparent,
    ),
  ),
  1. use floatingActionButton instead of bottomNavigationBar in Scaffold.(see below)

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

Upvotes: 7

mcdaqc
mcdaqc

Reputation: 31

You might need to add extendBody: true in Scaffold.

Upvotes: 1

Sulaymon Ne&#39;matov
Sulaymon Ne&#39;matov

Reputation: 448

Try remove first Container in build method. If not work, remove margin and padding in second Container.

Upvotes: 0

Related Questions