TimeLine Animation In Flutter

TimeLine Animation In Flutter :

Screenshot :

TimeLine Animation In Flutter :

guidelines.dart

import 'package:estruturabasica/timeline.dart';
import 'package:flutter/material.dart';

class GuideLinesPage extends StatefulWidget {
  GuideLinesPage({Key key}) : super(key: key);

  @override
  createState() => _GuideLinesState();
}

class _GuideLinesState extends State<GuideLinesPage> {
  @override
  Widget build(BuildContext context) {
    final List<TimelineModel> list = [
      TimelineModel(
          id: "1",
          description: "World Best Website",
          lineColor: Colors.yellow,
          descriptionColor: Colors.green,
          titleColor: Colors.green,
          title: "Flutter"),
      TimelineModel(
          id: "2",
          lineColor: Colors.red,
          description: "Flutter Interview Question \nTop 10 display",
          title: "Flutter Interview Question"),
      TimelineModel(
          id: "3",
          description: "Every pattern avialble in \nwww.fluttertutorial.in",
          lineColor: Colors.black,
          title: "Flutter")
    ];
    return Scaffold(
        appBar: AppBar(title: Text('Flutter TimeLine Animation')),
        body: TimelineComponent(timelineList: list));
  }
}

timeline.dart

import 'package:flutter/material.dart';

class TimelineComponent extends StatefulWidget {
  final List<TimelineModel> timelineList;

  final Color backgroundColor;

  final Color headingColor;

  const TimelineComponent({
    Key key,
    this.timelineList,
    this.backgroundColor,
    this.headingColor,
  }) : super(key: key);

  @override
  TimelineComponentState createState() {
    return new TimelineComponentState();
  }
}

class TimelineComponentState extends State<TimelineComponent>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;
  double fraction = 0.0;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new ListView.builder(
            itemCount: widget.timelineList.length,
            itemBuilder: (_, index) {
              return new TimelineElement(
                  lineColor: widget.timelineList[index].lineColor == null
                      ? Theme.of(context).accentColor
                      : widget.timelineList[index].lineColor,
                  backgroundColor: widget.backgroundColor == null
                      ? Colors.white
                      : widget.backgroundColor,
                  model: widget.timelineList[index],
                  firstElement: index == 0,
                  lastElement: widget.timelineList.length == index + 1,
                  controller: controller,
                  headingColor: widget.timelineList[index].titleColor,
                  descriptionColor:
                      widget.timelineList[index].descriptionColor);
            }));
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

class TimelineModel {
  final String id;
  final String title;
  final String description;
  final Color lineColor;
  final Color descriptionColor;
  final Color titleColor;

  const TimelineModel(
      {this.id,
      this.title,
      this.description,
      this.lineColor,
      this.descriptionColor,
      this.titleColor});
}

class TimelineElement extends StatelessWidget {
  final Color lineColor;
  final Color backgroundColor;
  final TimelineModel model;
  final bool firstElement;
  final bool lastElement;
  final Animation<double> controller;
  final Color headingColor;
  final Color descriptionColor;

  TimelineElement(
      {@required this.lineColor,
      @required this.backgroundColor,
      @required this.model,
      this.firstElement = false,
      this.lastElement = false,
      this.controller,
      this.headingColor,
      this.descriptionColor});

  Widget _buildLine(BuildContext context, Widget child) {
    return new Container(
        width: 40.0,
        child: new CustomPaint(
            painter: new TimelinePainter(
                lineColor: lineColor,
                backgroundColor: backgroundColor,
                firstElement: firstElement,
                lastElement: lastElement,
                controller: controller)));
  }

  Widget _buildContentColumn(BuildContext context) {
    return new Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
              padding: const EdgeInsets.only(bottom: 8.0, top: 8.0),
              child: new Text(
                  model.title.length > 47
                      ? model.title.substring(0, 47) + "..."
                      : model.title,
                  style: new TextStyle(
                      fontWeight: FontWeight.bold,
                      color:
                          headingColor != null ? headingColor : Colors.black))),
          new Expanded(
              child: new Text(
                  model.description != null
                      ? (model.description.length > 50
                          ? model.description.substring(0, 50) + "..."
                          : model.description)
                      : "", // To prevent overflowing of text to the next element, the text is truncated if greater than 75 characters
                  style: new TextStyle(
                      color: descriptionColor != null
                          ? descriptionColor
                          : Colors.grey)))
        ]);
  }

  Widget _buildRow(BuildContext context) {
    return new Container(
        height: 80.0,
        color: backgroundColor,
        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 0.0),
        child: new Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new AnimatedBuilder(builder: _buildLine, animation: controller),
              new Expanded(child: _buildContentColumn(context))
            ]));
  }

  @override
  Widget build(BuildContext context) {
    return _buildRow(context);
  }
}

class TimelinePainter extends CustomPainter {
  final Color lineColor;
  final Color backgroundColor;
  final bool firstElement;
  final bool lastElement;
  final Animation<double> controller;
  final Animation<double> height;

  TimelinePainter(
      {@required this.lineColor,
      @required this.backgroundColor,
      this.firstElement = false,
      this.lastElement = false,
      this.controller})
      : height = new Tween(begin: 0.0, end: 1.0).animate(
          new CurvedAnimation(
            parent: controller,
            curve: new Interval(0.45, 1.0, curve: Curves.ease),
          ),
        ),
        super(repaint: controller);

  @override
  void paint(Canvas canvas, Size size) {
    _centerElementPaint(canvas, size);
  }

  void _centerElementPaint(Canvas canvas, Size size) {
    Paint lineStroke = new Paint()
      ..color = lineColor
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;
    if (firstElement && lastElement) {
      // Do nothing
    } else if (firstElement) {
      Offset offsetCenter = size.center(new Offset(0.0, -4.0));
      Offset offsetBottom = size.bottomCenter(new Offset(0.0, 0.0));
      Offset renderOffset = new Offset(
          offsetBottom.dx, offsetBottom.dy * (0.5 + (controller.value / 2)));
      canvas.drawLine(offsetCenter, renderOffset, lineStroke);
    } else if (lastElement) {
      Offset offsetTopCenter = size.topCenter(new Offset(0.0, 0.0));
      Offset offsetCenter = size.center(new Offset(0.0, -4.0));
      Offset renderOffset =
          new Offset(offsetCenter.dx, offsetCenter.dy * controller.value);
      canvas.drawLine(offsetTopCenter, renderOffset, lineStroke);
    } else {
      Offset offsetTopCenter = size.topCenter(new Offset(0.0, 0.0));
      Offset offsetBottom = size.bottomCenter(new Offset(0.0, 0.0));
      Offset renderOffset =
          new Offset(offsetBottom.dx, offsetBottom.dy * controller.value);
      canvas.drawLine(offsetTopCenter, renderOffset, lineStroke);
    }

    Paint circleFill = new Paint()
      ..color = lineColor
      ..style = PaintingStyle.fill;

    canvas.drawCircle(size.center(new Offset(0.0, -8.0)), 6.0, circleFill);
  }

  @override
  bool shouldRepaint(TimelinePainter oldDelegate) {
    return oldDelegate.lineColor != lineColor ||
        oldDelegate.backgroundColor != backgroundColor;
  }
}

main.dart

import 'package:flutter/material.dart';
import 'guidelines.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
    home: GuideLinesPage(),
      debugShowCheckedModeBanner: false
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in