Guest User

Untitled

a guest
Jan 18th, 2019
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.18 KB | None | 0 0
  1. import 'dart:math' as math;
  2.  
  3. import 'package:flutter/material.dart';
  4. import 'package:flutter/scheduler.dart';
  5.  
  6. void main() => runApp(MyApp());
  7.  
  8. class MyApp extends StatelessWidget {
  9. @override
  10. Widget build(BuildContext context) {
  11. return MaterialApp(
  12. debugShowCheckedModeBanner: false,
  13. title: 'Flutter Demo',
  14. theme: ThemeData(
  15. primarySwatch: Colors.blue,
  16. ),
  17. home: MyHomePage(title: 'Flutter Demo Home Page'),
  18. );
  19. }
  20. }
  21.  
  22. class MyHomePage extends StatefulWidget {
  23. MyHomePage({Key key, this.title}) : super(key: key);
  24.  
  25. final String title;
  26.  
  27. @override
  28. _MyHomePageState createState() => _MyHomePageState();
  29. }
  30.  
  31. class _MyHomePageState extends State<MyHomePage> {
  32. static var _items = [
  33. ["\$100M", "In research grants for scientific investigations"],
  34. ["1985", "In research grants for scientific investigations"],
  35. ["\$200M", "Simply dummy text of the printing and typesetting industry"],
  36. ["1995", "Contrary to popular belief, Lorem Ipsum is not simply random text"],
  37. ["\$100M", "In research grants for scientific investigations"],
  38. ["1985", "In research grants for scientific investigations"],
  39. ["\$200M", "Simply dummy text of the printing and typesetting industry"],
  40. ["1995", "Contrary to popular belief, Lorem Ipsum is not simply random text"],
  41. ["\$100M", "In research grants for scientific investigations"],
  42. ["1985", "In research grants for scientific investigations"],
  43. ["\$200M", "Simply dummy text of the printing and typesetting industry"],
  44. ["1995", "Contrary to popular belief, Lorem Ipsum is not simply random text"],
  45. ["\$100M", "In research grants for scientific investigations"],
  46. ["1985", "In research grants for scientific investigations"],
  47. ["\$200M", "Simply dummy text of the printing and typesetting industry"],
  48. ["1995", "Contrary to popular belief, Lorem Ipsum is not simply random text"],
  49. ["\$100M", "In research grants for scientific investigations"],
  50. ["1985", "In research grants for scientific investigations"],
  51. ["\$200M", "Simply dummy text of the printing and typesetting industry"],
  52. ["1995", "Contrary to popular belief, Lorem Ipsum is not simply random text"],
  53. ];
  54.  
  55.  
  56. List<TimeLineItem> items = [];
  57.  
  58. List<Color> timeLineColors = [
  59. Colors.red,
  60. Colors.green,
  61. Colors.blue,
  62. Colors.orange,
  63. ];
  64.  
  65.  
  66. @override
  67. void initState() {
  68. super.initState();
  69.  
  70. _items.asMap().forEach((i, item) {
  71. items.add(
  72. TimeLineItem(
  73. color: timeLineColors[i%timeLineColors.length],
  74. axisDirection: i.isEven ? AxisDirection.up : AxisDirection.down,
  75. text1: Text(
  76. item[0],
  77. textAlign: TextAlign.start,
  78. style: TextStyle(
  79. color: Color(0xFF454545),
  80. fontWeight: FontWeight.normal,
  81. fontSize: 21.0,
  82. fontFamily: 'RobotoMedium',
  83. ),
  84. ),
  85. text2: Text(
  86. item[1],
  87. textAlign: TextAlign.start,
  88. overflow: TextOverflow.ellipsis,
  89. maxLines: 3,
  90. style: TextStyle(
  91. color: Color(0xFF455454),
  92. fontWeight: FontWeight.normal,
  93. fontSize: 13.0,
  94. fontFamily: 'RobotoLight',
  95. ),
  96. ),
  97. ),
  98. );
  99. });
  100. }
  101.  
  102. @override
  103. Widget build(BuildContext context) {
  104. return Scaffold(
  105. appBar: AppBar(
  106. title: Text(widget.title),
  107. ),
  108. body: Container(
  109. margin: EdgeInsets.symmetric(vertical: 20.0),
  110. height: 130.0,
  111. child: TimeLineItems(
  112. items: items,
  113. ),
  114. ),
  115. );
  116. }
  117. }
  118.  
  119. ///
  120. /// Timeline Widget
  121. ///
  122. class TimeLineItems extends StatefulWidget {
  123. TimeLineItems({
  124. Key key,
  125. this.width = 140.0,
  126. this.height = 50.0,
  127. this.spaceBetween = 15.0,
  128. this.items = const [],
  129. });
  130.  
  131. final double width;
  132. final double height;
  133. final double spaceBetween;
  134. final List<TimeLineItem> items;
  135.  
  136. @override
  137. TimeLineItemsState createState() {
  138. return TimeLineItemsState();
  139. }
  140. }
  141.  
  142. class TimeLineItemsState extends State<TimeLineItems> {
  143.  
  144. ScrollController _scrollController;
  145.  
  146. @override
  147. void initState() {
  148. super.initState();
  149. }
  150.  
  151. @override
  152. dispose() {
  153. _scrollController.dispose();
  154. super.dispose();
  155. }
  156.  
  157.  
  158. @override
  159. Widget build(BuildContext context) {
  160. _scrollController = new ScrollController(initialScrollOffset: 200);
  161. SchedulerBinding.instance.addPostFrameCallback((_) {
  162. _scrollController.animateTo(
  163. -10.0, duration: new Duration(seconds: 3), curve: Curves.ease);
  164. });
  165. return ListView.builder(
  166. scrollDirection: Axis.horizontal,
  167. itemCount: widget.items.length,
  168. controller: _scrollController,
  169. itemBuilder: (BuildContext ctxt, int index) {
  170. return Container(
  171. margin: EdgeInsets.only(top: widget.spaceBetween, right: widget.spaceBetween),
  172. child: Stack(
  173. children: <Widget>[
  174. Positioned(
  175. width: widget.width - 20,
  176. top: 0,
  177. left: 20,
  178. child: Container(
  179. alignment: Alignment.bottomLeft,
  180. child: widget.items[index].axisDirection == AxisDirection.down
  181. ? widget.items[index].text2
  182. : widget.items[index].text1,
  183. width: widget.width,
  184. height: widget.height - 5,
  185. ),
  186. ),
  187. Positioned(
  188. width: widget.width - 20,
  189. top: widget.height + 10,
  190. left: 20,
  191. child: Container(
  192. alignment: Alignment.topLeft,
  193. child: widget.items[index].axisDirection == AxisDirection.down
  194. ? widget.items[index].text1
  195. : widget.items[index].text2,
  196. width: widget.width,
  197. height: widget.height,
  198. ),
  199. ),
  200. CustomPaint(
  201. size: Size(widget.width, widget.height),
  202. painter: TimeLinePainter(
  203. widget.items[index].color,
  204. widget.width,
  205. widget.height,
  206. widget.items[index].axisDirection,
  207. ),
  208. ),
  209. ],
  210. ),
  211. );
  212. });
  213. }
  214. }
  215.  
  216.  
  217. ///
  218. /// Model
  219. ///
  220. class TimeLineItem {
  221. TimeLineItem({
  222. this.color = Colors.black,
  223. @required this.text1,
  224. @required this.text2,
  225. this.axisDirection = AxisDirection.up,
  226. });
  227.  
  228. Color color;
  229. Text text1;
  230. Text text2;
  231. AxisDirection axisDirection;
  232. }
  233.  
  234.  
  235. ///
  236. /// Painter
  237. ///
  238. class TimeLinePainter extends CustomPainter {
  239. final Color color;
  240. final double width;
  241. final double height;
  242. final AxisDirection axis;
  243.  
  244. TimeLinePainter(this.color, this.width, this.height, this.axis);
  245.  
  246. @override
  247. void paint(Canvas canvas, Size size) {
  248. final Paint circle = Paint()
  249. ..color = color
  250. ..strokeWidth = 3.0
  251. ..strokeCap = StrokeCap.round
  252. ..style = PaintingStyle.stroke;
  253.  
  254. canvas.drawArc(
  255. Rect.fromCircle(
  256. center: Offset(10, height),
  257. radius: 6.0,
  258. ),
  259. -math.pi / 2,
  260. 2 * math.pi,
  261. false,
  262. circle,
  263. );
  264.  
  265. final Paint lineX = Paint()
  266. ..color = color
  267. ..style = PaintingStyle.fill;
  268.  
  269. canvas.drawRect(
  270. Rect.fromLTWH(
  271. 15,
  272. height,
  273. width,
  274. 3.0,
  275. ),
  276. lineX,
  277. );
  278.  
  279. final Paint lineY = Paint()
  280. ..color = color
  281. ..style = PaintingStyle.fill;
  282.  
  283. canvas.drawRect(
  284. Rect.fromLTWH(
  285. 8,
  286. axis == AxisDirection.down ? height + 5 : height - 5,
  287. 3.0,
  288. axis == AxisDirection.down ? height : -height,
  289. ),
  290. lineY,
  291. );
  292.  
  293. final Paint circleFill = Paint()
  294. ..color = color
  295. ..strokeWidth = 3.0
  296. ..strokeCap = StrokeCap.round
  297. ..style = PaintingStyle.fill;
  298.  
  299. canvas.drawArc(
  300. Rect.fromCircle(
  301. center: Offset(10, axis == AxisDirection.down ? height * 2 + 5 : -5),
  302. radius: 6.0,
  303. ),
  304. -math.pi / 2,
  305. 2 * math.pi,
  306. false,
  307. circleFill,
  308. );
  309.  
  310. canvas.translate(-50.0, 10.0);
  311. }
  312.  
  313. @override
  314. bool shouldRepaint(TimeLinePainter old) => false;
  315. }
Add Comment
Please, Sign In to add comment