Custom Widget Transparent Background

Widgets & Design

I have been breaking my head for the past 2 days trying to set a transparent background for a widget. Can someone please help me? I don't think it's a rocket science, but for me it is ๐Ÿ˜ž

Please, help a friend in need.

What have you tried so far?

I tried changing it as Material, Container, etc.
My current build is below. I'm using the background color as a parameter but this is not helping either.

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: widget.backgroundColor,
          width: widget.width ?? MediaQuery.of(context).size.width,
          height: widget.height ?? MediaQuery.of(context).size.height,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(
                    icon: isPlaying ? widget.pauseIcon : widget.playIcon,
                    onPressed: _togglePlayPause,
                    color: Colors.white,
                    iconSize: widget.iconSize,
                  ),
                  IconButton(
                    icon: widget.scenarioControlIcon,
                    onPressed: _showScenarioControl,
                    color: Colors.white,
                    iconSize: widget.iconSize,
                  ),
                ],
              ),
              SizedBox(height: 20), // Adjust as needed to reduce space
              Slider(
                value: vocalPosition.inMilliseconds.toDouble(),
                onChanged: (value) =>
                    vocalPlayer.seek(Duration(milliseconds: value.toInt())),
                min: 0.0,
                max: vocalDuration.inMilliseconds.toDouble(),
              ),
              // Displaying current position and total duration
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("${_formatDuration(vocalPosition)}"),
                    Text("${_formatDuration(vocalDuration)}"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
Did you check FlutterFlow's Documentation for this topic?
Yes
2 replies