如何使自定义小部件的颜色透明

Question

I have a below screen and have a bottombar as the below image:

What I need now to make this bottom bar transparent, I tried to add transparent color by wraping the padding with a container and doesn't work fine...

this is the below code for the home screen:

import 'package:deliveryapp/domain/repository/api_repository.dart';
import 'package:deliveryapp/domain/repository/local_storage_repository.dart';
import 'package:deliveryapp/presentation/common/theme.dart';
import 'package:deliveryapp/presentation/provider/home/cart/cart_bloc.dart';
import 'package:deliveryapp/presentation/provider/home/cart/cart_screen.dart';
import 'package:deliveryapp/presentation/provider/home/home_bloc.dart';
import 'package:deliveryapp/presentation/provider/home/products/products_screen.dart';
import 'package:deliveryapp/presentation/provider/home/profile/profile_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatelessWidget {
  HomeScreen._();

  static Widget init(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => HomeBLoC(
            apiRepositoryInterface: context.read<ApiRepositoryInterface>(),
            localRepositoryInterface: context.read<LocalRepositoryInterface>(),
          )..loadUser(),
          builder: (_, __) => HomeScreen._(),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of<HomeBLoC>(context);
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: IndexedStack(
              index: bloc.indexSelected,
              children: [
                ProductsScreen.init(context),
                const Placeholder(),
                const CartScreen(),
                const Placeholder(),
                ProfileScreen.init(context),
              ],
            ),
          ),
          _DeliveryNavigationBar(
            index: bloc.indexSelected,
          ),
        ],
      ),
    );
  }
}

class _DeliveryNavigationBar extends StatelessWidget {
  final int index;

  _DeliveryNavigationBar({
    Key key,
    this.index,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of<HomeBLoC>(context);
    final cartBloc = Provider.of<CartBLoC>(context);
    final user = bloc.user;
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Theme.of(context).canvasColor,
          border: Border.all(
            color: Theme.of(context).bottomAppBarColor,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(25),
        ),
        child: Padding(
          padding: const EdgeInsets.all(5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.home,
                      color: index == 0
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(0),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.store,
                      color: index == 1
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(1),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: Center(
                    child: Stack(
                      children: [
                        CircleAvatar(
                          backgroundColor: DeliveryColors.blackBlue,
                          radius: 23,
                          child: IconButton(
                            icon: Icon(
                              Icons.shopping_basket,
                              color: index == 2
                                  ? DeliveryColors.green
                                  : DeliveryColors.white,
                            ),
                            onPressed: () => bloc.updateIndexSelected(2),
                          ),
                        ),
                        Positioned(
                          right: 0,
                          child: cartBloc.totalItems == 0
                              ? const SizedBox.shrink()
                              : CircleAvatar(
                                  radius: 10,
                                  backgroundColor: Colors.pinkAccent,
                                  child: Text(
                                    cartBloc.totalItems.toString(),
                                  ),
                                ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.favorite_border,
                      color: index == 3
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(3),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: () => bloc.updateIndexSelected(4),
                  child: user?.image == null
                      ? const SizedBox.shrink()
                      : Center(
                          child: CircleAvatar(
                            radius: 15,
                            backgroundImage: AssetImage(
                              user.image,
                            ),
                          ),
                        ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

You can use Opacity Class

A widget that makes its child partially transparent. This class paints its child into an intermediate buffer and then blends the child back into the scene partially transparent.

which is especially designed for this usecase:

return Opacity(opacity: 0.5, child: Padding(...

Along with adding extendBody: true to your Scaffold:

Scaffold(extendBody: true, ...