Flutter custom indicator animation simple

Design

Implement static ui with Flutter

Widget indicatorIcon() {
  return new Container(
    width: screenSize.width,
    height: height,
    padding: new EdgeInsets.symmetric(
      vertical: height / 2 - iconSize / 2,
    ),
    child: new Stack(
      children: <Widget>[
        getIcon(0),
        getIcon(1),
        getIcon(2),
        getIcon(3),
      ],
    ),
  );
}

Widget getIcon(index) {
  return new Positioned(
    left: section * (index * 2 + 1) - iconSize / 2,
    child: new Container(
      width: 47.0,
      height: 47.0,
      alignment: Alignment.center,
      child: new Text('x'),
    ),
  );
}

Next to build Custom painter.

• First, imaginary animation when playing:

Let see, it combine of left circle + rectangle + right circle

Next, let fix entryIndex position, and add animation value to targetIndex like gif.

Now write a screenplay for entry point.