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:

Playing

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

Structure

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

Now write a screenplay for entry point.

screenplay

Finally, dynamic for each tab index.

Source:

Repo

Related post: https://medium.com/@nhancv/why-i-move-to-flutter-34c4005b96ef