0

This is my current widget:

Screenshot

I want the borders to look transparent, so that I can see the red background just behind that. I have tried wrapping it with a Container with Colors.transparent as its color, but it hasn't worked at all.

How can I achieve this? This is my code, currently:

return Container(
  height: 80.0,
  decoration: const BoxDecoration(
    color: Colors.black38,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          const SizedBox(width: 11.0),
          Container(
            decoration: BoxDecoration(
            color: addiction.color,
              borderRadius: const BorderRadius.all(
                Radius.circular(15),
              ),
            ),
            height: 60.0,
            width: 6.0,
          ),
          const SizedBox(width: 11.0),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                addiction.name,
                style: GoogleFonts.lato(
                  fontSize: 21.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 4.0),
              buildDate(),
            ],
          ),
        ],
      ),
    ],
  ),
);

Any ideas?

Impasse
  • 85
  • 9

2 Answers2

0
return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);
Tasnuva Tavasum oshin
  • 1
  • 1
  • 17
  • 28
  • Using this though I get pitch black backgrounds, and if I try to wrap my stuff with `Container`s (to add a custom color) then the problem remains. Am I doing something wrong? – Impasse Jan 04 '22 at 06:08
0

Okay, I was able to solve this by using a Stack as suggested here.

return Stack(
 children: [
 // background layer of the tile
 Container(
  height: 80,
  decoration: BoxDecoration(
    color: Colors.red[300],
    // needs to be a unit more or so than the tile's radius
    borderRadius: const BorderRadius.all(Radius.circular(16)),
  ),
  alignment: Alignment.centerRight,
  padding: const EdgeInsets.only(right: 10),
  child: const Icon(
    Icons.delete_forever,
    color: Colors.white,
    size: 25.0,
  ),
),
// foreground layer of the tile
Dismissible(
  key: Key(addiction.id),
  direction: DismissDirection.endToStart,
  onDismissed: (direction) {
    manager.deleteAddiction(index);

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('${addiction.name} deleted.'),
    ));
  },
  child: InkWell(
    borderRadius: const BorderRadius.all(Radius.circular(15)),
    onTap: () {print("helo");},
    child: AddictionTile(
      key: Key(addiction.id),
      addiction: addiction,
    ),
   ),
  ),
 ],
);
Impasse
  • 85
  • 9