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_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_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