首页 文章

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

提问于
浏览
0

我试图跟随 Flutter udacity 课程,在代码的这一部分中,我需要创建一个透明背景的自定义小部件,但它显示的是白色背景。父背景设置为略微透明的绿色,我在父窗口小部件中使用Scaffold。如何获取我的自定义类别小部件的背景透明?

main.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,
                      ),
                    ),
                  ],
                ),
              ),
          ),
        ),
    );
  }
}

1 回答

  • 2

    只需设置 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,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    

相关问题