如何让透明容器从背景中脱颖而出？

Question

I'm trying to make my containers transparent and still want them to easily standout from the background color, just like below image. (this is PSD image)

Desired Layout

I tried wrapping Container inside a Material widget like this:

class customBar extends StatelessWidget {
  const customBar({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      elevation: 2,
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: double.infinity,
        height: 65,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          //color: Color(0xff0a4873),
        ),
        child: Text(
          '',
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
}

but it gives it too much elevation

also tried using a solid color but that doesn't give me what is required either,

Expanded(
  flex: 4,
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        customBar(),
        Container(
          width: double.infinity,
          height: 60,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Color(0xff0a4873),
          ),
          child: Text(
            '',
            textAlign: TextAlign.left,
          ),
        ),
      ],
    ),
  ),
),

here is the output:

Output

Answer 1

Material is not necessary. If you want to adjust color transparency either use Colors.YOUR_COLOR.withOpacity(0.0.. to.. 1.0) or Color.fromRGBO(RED, BLUE, GREEN, 0.0.. to.. 1.0)
Examples:

Colors.blue.withOpacity(0.3);
// OR
Color.fromRGBO(50, 45, 220, 0.3);

Edit
You can simplify your layout like this.

HomePage

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomContainer(
        child: Column(
          children: [
            // other widgets and your containers here
          ],
        ),
      ),
    );
  }
}

Your CustomContainer Widget

class CustomContainer extends StatelessWidget {
  final Widget child;
  CustomContainer({this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomLeft,
          colors: [
            Color(0xFF1187be),
            Color(0xff061465),
          ],
        ),
      ),
      child: child,
    );
  }
}