Skip to content

Commit 2b7bdfc

Browse files
chulwoo-parkchulwoo-park
committed
Update example and README.md
1 parent 74ff076 commit 2b7bdfc

19 files changed

+647
-25
lines changed

‎README.md

Lines changed: 462 additions & 4 deletions
Large diffs are not rendered by default.

‎design/feature_graphic.png

130 KB
Loading

‎example/lib/component_page.dart

Lines changed: 146 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,16 @@ class ComponentPage extends StatelessWidget {
1515
name: 'Outlined dot\nIndicator',
1616
item: OutlinedDotIndicator(),
1717
),
18+
_ComponentRow(
19+
name: 'Container\nIndicator',
20+
item: ContainerIndicator(
21+
child: Container(
22+
width: 15.0,
23+
height: 15.0,
24+
color: Colors.blue,
25+
),
26+
),
27+
),
1828
_ComponentRow(
1929
name: 'Solid line\nConnector',
2030
item: SizedBox(
@@ -30,12 +40,44 @@ class ComponentPage extends StatelessWidget {
3040
),
3141
),
3242
_ComponentRow(
33-
name: 'TimelineNode',
43+
name: 'Decorated line\nConnector',
44+
item: SizedBox(
45+
height: 20.0,
46+
child: DecoratedLineConnector(
47+
decoration: BoxDecoration(
48+
gradient: LinearGradient(
49+
begin: Alignment.topCenter,
50+
end: Alignment.bottomCenter,
51+
colors: [Colors.blue, Colors.lightBlueAccent[100]],
52+
),
53+
),
54+
),
55+
),
56+
),
57+
_ComponentRow(
58+
name: 'Simple TimelineNode',
3459
item: SizedBox(
3560
height: 50.0,
3661
child: TimelineNode.simple(),
3762
),
3863
),
64+
_ComponentRow(
65+
name: 'Complex TimelineNode',
66+
item: SizedBox(
67+
height: 80.0,
68+
child: TimelineNode(
69+
indicator: Card(
70+
margin: EdgeInsets.zero,
71+
child: Padding(
72+
padding: EdgeInsets.all(8.0),
73+
child: Text('Complex'),
74+
),
75+
),
76+
startConnector: DashedLineConnector(),
77+
endConnector: SolidLineConnector(),
78+
),
79+
),
80+
),
3981
_ComponentRow(
4082
name: 'TimelineTile',
4183
item: TimelineTile(
@@ -56,6 +98,109 @@ class ComponentPage extends StatelessWidget {
5698
),
5799
),
58100
),
101+
_ComponentRow(
102+
name: 'ConnectionDirection.before',
103+
item: Padding(
104+
padding: const EdgeInsets.only(bottom: 8.0),
105+
child: FixedTimeline.tileBuilder(
106+
builder: TimelineTileBuilder.connectedFromStyle(
107+
connectionDirection: ConnectionDirection.before,
108+
connectorStyleBuilder: (context, index) {
109+
return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;
110+
},
111+
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
112+
itemExtent: 40.0,
113+
itemCount: 3,
114+
),
115+
),
116+
),
117+
),
118+
_ComponentRow(
119+
name: 'ConnectionDirection.after',
120+
item: Padding(
121+
padding: const EdgeInsets.all(8.0),
122+
child: FixedTimeline.tileBuilder(
123+
builder: TimelineTileBuilder.connectedFromStyle(
124+
connectionDirection: ConnectionDirection.after,
125+
connectorStyleBuilder: (context, index) {
126+
return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;
127+
},
128+
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
129+
itemExtent: 40.0,
130+
itemCount: 3,
131+
),
132+
),
133+
),
134+
),
135+
_ComponentRow(
136+
name: 'ContentsAlign.basic',
137+
item: Padding(
138+
padding: const EdgeInsets.all(8.0),
139+
child: FixedTimeline.tileBuilder(
140+
builder: TimelineTileBuilder.connectedFromStyle(
141+
contentsAlign: ContentsAlign.basic,
142+
oppositeContentsBuilder: (context, index) => Padding(
143+
padding: const EdgeInsets.all(8.0),
144+
child: Text('opposite\ncontents'),
145+
),
146+
contentsBuilder: (context, index) => Card(
147+
child: Padding(
148+
padding: const EdgeInsets.all(8.0),
149+
child: Text('Contents'),
150+
),
151+
),
152+
connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
153+
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
154+
itemCount: 3,
155+
),
156+
),
157+
),
158+
),
159+
_ComponentRow(
160+
name: 'ContentsAlign.reverse',
161+
item: Padding(
162+
padding: const EdgeInsets.all(8.0),
163+
child: FixedTimeline.tileBuilder(
164+
builder: TimelineTileBuilder.connectedFromStyle(
165+
contentsAlign: ContentsAlign.reverse,
166+
oppositeContentsBuilder: (context, index) => Padding(
167+
padding: const EdgeInsets.all(8.0),
168+
child: Text('opposite\ncontents'),
169+
),
170+
contentsBuilder: (context, index) => Card(
171+
child: Padding(
172+
padding: const EdgeInsets.all(8.0),
173+
child: Text('Contents'),
174+
),
175+
),
176+
connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
177+
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
178+
itemCount: 3,
179+
),
180+
),
181+
),
182+
),
183+
_ComponentRow(
184+
name: 'ContentsAlign.alternating',
185+
item: FixedTimeline.tileBuilder(
186+
builder: TimelineTileBuilder.connectedFromStyle(
187+
contentsAlign: ContentsAlign.alternating,
188+
oppositeContentsBuilder: (context, index) => Padding(
189+
padding: const EdgeInsets.all(8.0),
190+
child: Text('opposite\ncontents'),
191+
),
192+
contentsBuilder: (context, index) => Card(
193+
child: Padding(
194+
padding: const EdgeInsets.all(8.0),
195+
child: Text('Contents'),
196+
),
197+
),
198+
connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
199+
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
200+
itemCount: 3,
201+
),
202+
),
203+
),
59204
_ComponentRow(
60205
name: 'Horizontal\nTimeline',
61206
item: SizedBox(

‎example/lib/main.dart

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'package:flutter/rendering.dart';
44
import 'package:timelines/timelines.dart';
55

66
import 'component_page.dart';
7-
import 'showcase/package_delevery_tracking.dart';
7+
import 'showcase/package_delivery_tracking.dart';
88
import 'showcase/process_timeline.dart';
99
import 'showcase/timeline_status.dart';
1010
import 'showcase_page.dart';
@@ -26,13 +26,16 @@ class MyApp extends StatelessWidget {
2626
String path = Uri.tryParse(settings.name)?.path;
2727
Widget child;
2828
switch (path) {
29-
case 'timeline_status':
29+
case '/theme':
30+
child = ThemePage();
31+
break;
32+
case '/timeline_status':
3033
child = TimelineStatusPage();
3134
break;
32-
case 'package_delevery_tracking':
35+
case '/package_delivery_tracking':
3336
child = PackageDeliveryTrackingPage();
3437
break;
35-
case 'process_timeline':
38+
case '/process_timeline':
3639
child = ProcessTimelinePage();
3740
break;
3841
default:
@@ -41,20 +44,34 @@ class MyApp extends StatelessWidget {
4144

4245
return MaterialPageRoute(builder: (context) => HomePage(child: child));
4346
},
47+
initialRoute: '/',
4448
);
4549
}
4650
}
4751

48-
class HomePage extends StatelessWidget {
52+
class HomePage extends StatefulWidget {
4953
HomePage({
5054
Key key,
5155
@required this.child,
5256
}) : super(key: key);
5357

5458
final Widget child;
5559

60+
@override
61+
_HomePageState createState() => _HomePageState();
62+
}
63+
64+
class _HomePageState extends State<HomePage> {
5665
final _navigatorKey = GlobalKey<NavigatorState>();
5766

67+
@override
68+
void didUpdateWidget(covariant HomePage oldWidget) {
69+
super.didUpdateWidget(oldWidget);
70+
if (oldWidget.child != widget.child) {
71+
setState(() {});
72+
}
73+
}
74+
5875
@override
5976
Widget build(BuildContext context) {
6077
return WillPopScope(
@@ -72,7 +89,7 @@ class HomePage extends StatelessWidget {
7289
child: Navigator(
7390
key: _navigatorKey,
7491
onGenerateRoute: (settings) => MaterialPageRoute(
75-
builder: (context) => child,
92+
builder: (context) => widget.child,
7693
),
7794
),
7895
),
@@ -90,7 +107,7 @@ class WebAlert extends StatelessWidget {
90107
height: 80.0,
91108
child: Material(
92109
child: Center(
93-
child: Text("You are using the web version now. Some UI may be broken."),
110+
child: Text('You are using the web version now.\nSome UI can be broken.'),
94111
),
95112
),
96113
);

‎example/lib/showcase/package_delivery_tracking.dart

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -212,19 +212,21 @@ class _OnTimeBar extends StatelessWidget {
212212
Widget build(BuildContext context) {
213213
return Row(
214214
children: [
215-
MaterialButton(
216-
onPressed: () {
217-
ScaffoldMessenger.of(context).showSnackBar(
218-
SnackBar(
219-
content: Text('On-time!'),
220-
),
221-
);
222-
},
223-
elevation: 0,
224-
shape: StadiumBorder(),
225-
color: Color(0xff66c97f),
226-
textColor: Colors.white,
227-
child: Text('On-time'),
215+
Builder(
216+
builder: (context) => MaterialButton(
217+
onPressed: () {
218+
Scaffold.of(context).showSnackBar(
219+
SnackBar(
220+
content: Text('On-time!'),
221+
),
222+
);
223+
},
224+
elevation: 0,
225+
shape: StadiumBorder(),
226+
color: Color(0xff66c97f),
227+
textColor: Colors.white,
228+
child: Text('On-time'),
229+
),
228230
),
229231
Spacer(),
230232
Text(

‎screenshots/complex_timeline_node.png

8.81 KB
Loading

‎screenshots/connection_direction_after.png

7.75 KB
Loading

‎screenshots/connection_direction_before.png

7.76 KB
Loading

‎screenshots/container_indicator.png

3.99 KB
Loading

‎screenshots/contents_align_alternating.png

36.9 KB
Loading

0 commit comments

Comments
 (0)