CODEWITHSUNDEEP
flutterflutter-layout
anesin1109
anesin1109

Reputation: 335

Flutter Stack doesn't make children overlap

I'm trying to put a horizontal line(currently Divider but could be changed as a CustomPaint) as a background of a Row. However, regardless of the order of children, the line always goes front of the Row. I can't figure out what's wrong. Here's the code.

Stack(
  children: <Widget>[
    Positioned.fill(
      child: const Divider(color: Colors.black),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.arrow_forward, size: 32)
          ),
        ),
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.location_on, size: 32)
          ),
        ),
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.flag, size: 32)
          ),
        ),
      ],
    ),
  ],
),

and here's the result image.

Upvotes: 1

Views: 692

Answers (1)

Michael Yuwono
Michael Yuwono

Reputation: 2617

Use Container instead of Ink

Stack(
  children: <Widget>[
    Positioned.fill(
      child: const Divider(color: Colors.black),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.arrow_forward, size: 32)
          ),
        ),
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.location_on, size: 32)
          ),
        ),
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.flag, size: 32)
          ),
        ),
      ],
    ),
  ],
);

Upvotes: 3

Related Questions