具有透明背景的自定义小部件显示为白色

Question

我正在尝试学习 Flutter udacity 课程，在这部分代码中，我需要创建一个具有透明背景的自定义小部件，但它显示的是白色背景。父背景设置为略微透明的绿色，我在父小部件中使用Scaffold。如何让我的自定义Category Widget的背景透明？

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:unit_converter/category.dart';

const _categoryName = 'Cake';
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;


void main() => runApp(UnitConverterApp());


class UnitConverterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Unit Converter',
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          child: Category(
              name: _categoryName,
              color: _categoryColor,
              iconLocation: _categoryIcon,
          ),
        ),
      ),
    );
  }
}

category.dart

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class Category extends StatelessWidget {


  final String name;
  final ColorSwatch color;
  final IconData iconLocation;


  static const _height = 100.0;
  static const _radius = _height / 2;
  static const _padding = 8.0;
  static const _iconSize = 60.0;
  static const _textSize = 24.0;
  static const _iconPadding = 16.0;

  const Category({
    Key key,
    @required this.name,
    @required this.color,
    @required this.iconLocation,
  })  : assert(name != null),
        assert(color != null),
        assert(iconLocation != null),
        super(key: key);


  @override
  Widget build(BuildContext context) {
    return Material(
        child: Container(
          color: Colors.transparent,
          height: _height,
          child: Padding(
              padding: EdgeInsets.all(_padding),
              child: InkWell(
                borderRadius: BorderRadius.circular(_radius),
                splashColor: color,
                highlightColor: color,
                onTap: () => print('I was tapped!'),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Padding(
                        padding: EdgeInsets.all(_iconPadding),
                        child: Icon(
                            iconLocation,
                            size: _iconSize,
                        ),
                    ),
                    Center(
                      child: Text(
                        name,
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.headline,
                      ),
                    ),
                  ],
                ),
              ),
          ),
        ),
    );
  }
}

Answer 1

只需设置 Material color: Colors.transparent, 而不是 Container

@override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Container(
        height: _height,
        child: Padding(
          padding: EdgeInsets.all(_padding),
          child: InkWell(
            borderRadius: BorderRadius.circular(_radius),
            splashColor: color,
            highlightColor: color,
            onTap: () => print('I was tapped!'),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(_iconPadding),
                  child: Icon(
                    iconLocation,
                    size: _iconSize,
                  ),
                ),
                Center(
                  child: Text(
                    name,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }