【flutter】progress trackerを表示したい

前提・実現したいこと

以下のようなprogress trackerと言われるようなUIを作成したいです。
どのように作成するのがいいのでしょうか。

発生している問題・エラーメッセージ

簡単に作ったのが以下のような感じです。

該当のソースコード

dart:
1class ProgressCard extends StatelessWidget {
2  const ProgressCard({
3    Key key,
4    this.items,
5    this.index,
6  }) : super(key: key);
7
8  final List<String> items;
9  final int index;
10
11  @override
12  Widget build(BuildContext context) {
13    return Card(
14      color: ColorWhite,
15      margin: EdgeInsets.fromLTRB(24, 8, 24, 0),
16      child: Padding(
17        padding: EdgeInsets.all(16),
18        child: Row(
19          mainAxisSize: MainAxisSize.max,
20          mainAxisAlignment: MainAxisAlignment.center,
21          children: <Widget>[
22            tick1(),
23            line(),
24            tick2()
25          ],
26        ),
27      ),
28    );
29  }
30
31  Widget tick(bool isChecked){
32    return isChecked?Icon(Icons.check_circle,color: ColorAccent,):Icon(Icons.radio_button_unchecked, color: ColorAccent);
33  }
34
35  Widget tick1() {
36    return Column(
37      children: <Widget>[
38        tick(true),
39        Text(
40          items[0],
41          style: TextStyle(
42              fontFamily: fontDefault,
43              fontSize: 17,
44              fontWeight: FontWeight.bold,
45              color: ColorDisable,
46          ),
47        ),
48      ],
49    );
50  }
51  Widget tick2() {
52    return Column(
53      children: <Widget>[
54        tick(false),
55        Text(
56          items[1],
57          style: TextStyle(
58            fontFamily: fontDefault,
59            fontSize: 17,
60            fontWeight: FontWeight.bold,
61            color: ColorAccent,
62          ),
63        ),
64      ],
65    );
66  }
67
68  Widget spacer() {
69    return Container(
70      width: 5.0,
71    );
72  }
73
74  Widget line() {
75    return Container(
76      color: ColorAccent,
77      height: 4.0,
78      width: 50.0,
79    );
80  }
81}

補足情報（FW/ツールのバージョンなど）

縦の場合だと以下のパッケージが使えそうです。
https://pub.dev/packages/timeline_tile

似たような質問は以下。
https://stackoverflow.com/questions/57348640/flutter-how-to-dynamically-create-a-horizontal-timeline-widget

行動規範の内容に同意します

回答1件

自己解決

flutter_portalというパッケージを使用することで解決しました。

dart:
1class ProgressCard extends StatelessWidget {
2  const ProgressCard({
3    Key key,
4    this.items,
5    this.index,
6  }) : super(key: key);
7
8  final List<String> items;
9  final int index;
10
11  @override
12  Widget build(BuildContext context) {
13    return Portal(
14      child: Card(
15        color: ColorWhite,
16        margin: EdgeInsets.fromLTRB(24, 8, 24, 0),
17        child: Padding(
18          padding: EdgeInsets.fromLTRB(16, 16, 16, 33),
19          child: Row(
20            mainAxisAlignment: MainAxisAlignment.center,
21            children: <Widget>[
22              tick1(),
23              line(),
24              tick2()
25            ],
26          ),
27        ),
28      ),
29    );
30  }
31
32  Widget tick(bool isChecked){
33    return isChecked?Icon(Icons.check_circle,color: ColorAccent,):Icon(Icons.radio_button_unchecked, color: ColorAccent);
34  }
35
36  Widget tick1() {
37    return PortalEntry(
38      portalAnchor: Alignment.topCenter,
39      childAnchor: Alignment.bottomCenter,
40      portal: Text(
41        items[0],
42        style: TextStyle(
43          fontFamily: fontDefault,
44          fontSize: 17,
45          fontWeight: FontWeight.bold,
46          color: ColorDisable,
47        ),
48      ),
49      child: tick(true),
50    );
51  }
52
53  Widget tick2() {
54    return PortalEntry(
55      portalAnchor: Alignment.topCenter,
56      childAnchor: Alignment.bottomCenter,
57      portal: Text(
58        items[1],
59        style: TextStyle(
60          fontFamily: fontDefault,
61          fontSize: 17,
62          fontWeight: FontWeight.bold,
63          color: ColorAccent,
64        ),
65      ),
66      child: tick(false),
67    );
68  }
69
70  Widget spacer() {
71    return Container(
72      width: 5.0,
73    );
74  }
75
76  Widget line() {
77    return Container(
78      color: ColorAccent,
79      height: 4.0,
80      width: 100.0,
81    );
82  }
83}
84