Timeline In Flutter

Timeline In Flutter

In this flutter tutorial we will learn about the timeline and its type

there are three types of timeline in flutter

  • Circle Timeline
  • Line Time
  • Dashed Timeline

timeline is normally used for the uber like application.timeline is used for show the route of journey.there are two points starting and ending point in timeline.we will learn it using small flutter tutorial so let’s start

circle dot horizontal infinate

  Container(height: 10, child:  const MySeparator(color: Colors.grey)),

class MySeparator extends StatelessWidget {
  final double height;
  final Color color;

  const MySeparator({this.height = 1, this.color = Colors.black});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        final dashWidth = 12.0;
        final dashHeight = height;
        final dashCount = (boxWidth / (dashHeight * dashWidth)).floor();
        return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: 10,
              height: 10,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color, shape: BoxShape.circle),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.horizontal,
        );
      },
    );
  }
}

Circle Timeline in Flutter

Screenshot :

Timeline In Flutter

timeline_widget.dart

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

import 'task.dart';

class TimeLineWidget extends StatefulWidget {
  final List<TaskModel> taskList;

  final Color pickUpColor;
  final Color dropColor;

  final BoxShape dotedLineShape;

  final double widthOfDotedLineShape;
  final double heightOfDotedLineShape;

  const TimeLineWidget({
    Key key,
    this.taskList,
    this.dotedLineShape = BoxShape.circle,
    this.pickUpColor = Colors.black,
    this.dropColor = Colors.black,
    this.widthOfDotedLineShape = 6,
    this.heightOfDotedLineShape = 6,
  }) : super(key: key);
  @override
  createState() {
    return new TimeLineState();
  }
}

class TimeLineState extends State<TimeLineWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: widget.taskList.length,
        itemBuilder: (_, index) {
          return Container(
              margin: new EdgeInsets.only(top: index == 0 ? 10 : 0),
              child: Column(children: <Widget>[
                IntrinsicHeight(
                    child: Row(children: [
                  Container(
                      width: 30,
                      margin: new EdgeInsets.only(left: 10, top: 10),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(widget.taskList[index].time),
                            Text(widget.taskList[index].timeStatus)
                          ])),
                  Stack(children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(top: 2, bottom: 0),
                        height: double.infinity,
                        width: 20,
                        child: index == widget.taskList.length - 1
                            ? Container()
                            : /*TODO TIMELINE CIRCLE*/ Container(
                                margin:
                                    EdgeInsets.only(left: 0, top: 0, bottom: 0),
                                height: 30,
                                child: TimeLineCircle(
                                  color: index == 0
                                      ? widget.pickUpColor
                                      : widget.dropColor,
                                  boxShape: widget.dotedLineShape,
                                  mySizedBoxHeight:
                                      widget.widthOfDotedLineShape,
                                  mySizedBoxWidth:
                                      widget.heightOfDotedLineShape,
                                ))),
                    Container(
                        margin: new EdgeInsets.only(left: 2),
                        height: 15.0,
                        width: 15.0,
                        decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            color: index == widget.taskList.length - 1
                                ? Colors.green
                                : Colors.black))
                  ]),
                  Expanded(
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                        Container(
                            margin: new EdgeInsets.only(left: 10),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  Text(widget.taskList[index].title),
                                  Text(widget.taskList[index].description),
                                  SizedBox(height: 30)
                                ]))
                      ]))
                ]))
              ]));
        });
  }

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

class TimeLineCircle extends StatelessWidget {
  final double height;
  final Color color;
  final BoxShape boxShape;
  final double mySizedBoxWidth;
  final double mySizedBoxHeight;

  const TimeLineCircle({
    this.height = 1,
    this.color = Colors.black,
    this.boxShape,
    this.mySizedBoxWidth,
    this.mySizedBoxHeight,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      final boxWidth = constraints.constrainHeight();
      final dashWidth = 6.0;
      final dashHeight = height;
      final dashCount = (boxWidth / (dashHeight * dashWidth)).floor();

      return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
                width: mySizedBoxWidth,
                height: mySizedBoxHeight,
                child: DecoratedBox(
                    decoration: BoxDecoration(color: color, shape: boxShape)));
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.vertical);
    });
  }
}

task.dart

class TaskModel {
  String title, description;
  String time, timeStatus;

  TaskModel({this.title, this.description, this.time, this.timeStatus});
}

main.dart

import 'package:flutter/material.dart';
import 'package:timeline/task.dart';
import 'timeline_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter TimeLine',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<TaskModel> taskList = List();

  @override
  void initState() {
    super.initState();

    taskList.add(TaskModel(title: 'Junagadh', description: 'Bus', time: '3', timeStatus: 'hour'));
    taskList.add(TaskModel(title: 'Visavadar', description: 'Personal vehicle', time: '30', timeStatus: 'min'));
    taskList.add(TaskModel(title: 'Ravani', description: '', time: '', timeStatus: ''));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Flutter TimeLine')),
        body: TimeLineWidget(taskList: taskList));
  }
}

Line Timeline in Flutter

Screenshot :

Timeline In Flutter

timeline_widget.dart

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

import 'task.dart';

class TimeLineWidget extends StatefulWidget {
  final List<TaskModel> taskList;

  const TimeLineWidget({
    Key key,
    this.taskList,
  }) : super(key: key);
  @override
  createState() {
    return new TimeLineState();
  }
}

class TimeLineState extends State<TimeLineWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: widget.taskList.length,
        itemBuilder: (_, index) {
          return Container(
              margin: new EdgeInsets.only(top: index == 0 ? 10 : 0),
              child: Column(children: <Widget>[
                IntrinsicHeight(
                    child: Row(children: [
                  Container(
                      width: 30,
                      margin: new EdgeInsets.only(left: 10, top: 10),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(widget.taskList[index].time),
                            Text(widget.taskList[index].timeStatus)
                          ])),
                  Stack(children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(left: 10),
                        height: double.infinity,
                        width: 0,
                        decoration: BoxDecoration(
                            border: Border(
                                right: BorderSide(
                                    color: index == widget.taskList.length - 1 ? Colors.transparent :Colors.black, width: 2)))),
                    Container(
                        margin: new EdgeInsets.only(left: 1),
                        height: 15.0,
                        width: 15.0,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    width: 16.0, color: Colors.red.shade600),
                                bottom: BorderSide(
                                    width: 16.0, color: index == widget.taskList.length - 1 ?  Colors.green : Colors.black)),
                            color: Colors.white)

                        //TODO CIRCLE DECORATION
                        /*decoration: new BoxDecoration(
                            shape: BoxShape.circle, color: Colors.red)*/
                        )
                  ]),
                  Expanded(
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                        Container(
                            margin: new EdgeInsets.only(left: 10),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  Text(widget.taskList[index].title),
                                  Text(widget.taskList[index].description),
                                  SizedBox(height: 30)
                                ]))
                      ]))
                ]))
              ]));
        });
  }

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

task.dart

class TaskModel {
  String title, description;
  String time, timeStatus;

  TaskModel({this.title, this.description, this.time, this.timeStatus});
}

main.dart

import 'package:flutter/material.dart';
import 'package:timeline/task.dart';
import 'timeline_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter TimeLine',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<TaskModel> taskList = List();

  @override
  void initState() {
    super.initState();

    taskList.add(TaskModel(title: 'Junagadh', description: 'Bus', time: '3', timeStatus: 'hour'));
    taskList.add(TaskModel(title: 'Visavadar', description: 'Personal vehicle', time: '30', timeStatus: 'min'));
    taskList.add(TaskModel(title: 'Ravani', description: '', time: '', timeStatus: ''));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Flutter TimeLine')),
        body: TimeLineWidget(taskList: taskList));
  }
}

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