Created
September 14, 2020 08:40
-
-
Save AlexV525/c134ddce116fd9c79f6bec38f8e2b0ad to your computer and use it in GitHub Desktop.
How do you make timeline without Intrinsic?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends StatelessWidget{ | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text('Whatever'), | |
), | |
body: _DetailListWidget( | |
itemCount: 10, | |
headContent: (int index) => '$index+++++', | |
itemBuilder: (BuildContext context, int index) { | |
return Text('得' * 18 * (index + 1)); | |
} | |
), | |
); | |
} | |
} | |
class _DetailListWidget extends StatelessWidget { | |
const _DetailListWidget({ | |
Key key, | |
@required this.headContent, | |
@required this.itemCount, | |
@required this.itemBuilder, | |
}) : super(key: key); | |
final String Function(int index) headContent; | |
final int itemCount; | |
final IndexedWidgetBuilder itemBuilder; | |
Widget headerWidget(int index) { | |
return Row( | |
children: <Widget>[ | |
Image.network( | |
'https://tva1.sinaimg.cn/large/007S8ZIlgy1giq9kstfyhj300r00r0mg.jpg', | |
width: 10, | |
height: 10, | |
), | |
const SizedBox(width: 10), | |
Text( | |
headContent(index), | |
style: TextStyle( | |
color: Colors.grey, | |
height: 1.35, | |
fontSize: 13, | |
), | |
), | |
], | |
); | |
} | |
Widget get dashBorder { | |
return Positioned( | |
top: 0.0, | |
bottom: 0.0, | |
left: 4.5, | |
child: Image.network( | |
'https://tva1.sinaimg.cn/large/007S8ZIlgy1giq9jawhn3j300300i02b.jpg', | |
width: 1.25, | |
repeat: ImageRepeat.repeatY, | |
), | |
); | |
} | |
Widget contentContainer(BuildContext context, int index) { | |
return Container( | |
margin: EdgeInsets.symmetric(vertical: 12).copyWith( | |
left: 19.5, | |
), | |
padding: const EdgeInsets.symmetric( | |
horizontal: 15, | |
vertical: 10, | |
), | |
width: double.maxFinite, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(5), | |
color: Colors.grey[500], | |
), | |
child: itemBuilder(context, index), | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return ListView.builder( | |
padding: EdgeInsets.symmetric(vertical: 10), | |
itemCount: itemCount, | |
itemBuilder: (BuildContext context, int index) { | |
return Padding( | |
padding: EdgeInsets.symmetric(horizontal: 20), | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
headerWidget(index), | |
Stack( | |
children: <Widget>[ | |
dashBorder, | |
contentContainer(context, index), | |
], | |
), | |
], | |
), | |
); | |
}, | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment