Skip to content

Instantly share code, notes, and snippets.

@AlexV525
Created September 14, 2020 08:40
Show Gist options
  • Save AlexV525/c134ddce116fd9c79f6bec38f8e2b0ad to your computer and use it in GitHub Desktop.
Save AlexV525/c134ddce116fd9c79f6bec38f8e2b0ad to your computer and use it in GitHub Desktop.
How do you make timeline without Intrinsic?
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