SHARE
TWEET

Untitled

a guest Jan 18th, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top