Time line

Time line

Different Types of time line to show progress are prepared by flutter code in admin panel:

Custom time Line
Process time Line
Package delivery time Line
Status time Line 



Custom time Line:

It is custom time Line ,the timelines package is added in pubspec.yaml 's dependencies and located in: 
 es_flutter_component/lib/components/es_timeline/showcase/es_profile_timeline.dart 
 and is used as: 

EsCustomTimeLine(
  indicatorList: _indicatorList,
  contentList: _contentList,
)

   //  where


List<Widget> _indicatorList = [
  EsAvatarImage(
    path: "assets/images/img4.jpg",
    radius: StructureBuilder.dims!.h0Padding,
  ),
  EsAvatarWidget(
      backGroundColor: StructureBuilder.styles!.dangerColor().dangerRegular,
      widget: EsTitle(
        "SA",
        color: StructureBuilder.styles!.primaryLightColor,
      )),
  EsAvatarWidget(
      widget: EsSvgIcon(
    "packages/es_flutter_component/assets/svgs/gallery.svg",
    size: StructureBuilder.dims!.h3IconSize,
    color: StructureBuilder.styles!.primaryLightColor,
  )),
  EsAvatarWidget(
      backGroundColor:
          StructureBuilder.styles!.warningColor().warningRegular,
      widget: EsTitle(
        "HH",
        color: StructureBuilder.styles!.primaryLightColor,
      )),
];
Widget _content1() {
  return Container(
    padding: EdgeInsets.symmetric(
      vertical: StructureBuilder.dims!.h0Padding,
      horizontal: StructureBuilder.dims!.h0Padding,
    ),
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          EsTitle(AppLocalizations.of(context)!.lormshort),
          EsOrdinaryText(
            AppLocalizations.of(context)!.lorm,
            align: TextAlign.justify,
            color: StructureBuilder.styles!.primaryDarkColor,
          ),
          EsVSpacer(),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.access_time,
                size: StructureBuilder.dims!.h3IconSize / 2,
                color: StructureBuilder.styles!.secondaryColor,
              ),
              EsHSpacer(),
              EsLabelText(
                AppLocalizations.of(context)!.yesterday,
                color: StructureBuilder.styles!.secondaryColor,
              )
            ],
          )
        ],
      ),
    ),
  );
}

Widget _content2() {
  return Container(
    padding: EdgeInsets.symmetric(
      vertical: StructureBuilder.dims!.h0Padding,
      horizontal: StructureBuilder.dims!.h0Padding,
    ),
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          EsTitle(AppLocalizations.of(context)!.lormshort),
          EsOrdinaryText(
            AppLocalizations.of(context)!.lormmid,
            align: TextAlign.justify,
            color: StructureBuilder.styles!.primaryDarkColor,
          ),
          EsVSpacer(),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.access_time,
                size: StructureBuilder.dims!.h3IconSize / 2,
                color: StructureBuilder.styles!.secondaryColor,
              ),
              EsHSpacer(),
              EsLabelText(
                "20.10.2018",
                color: StructureBuilder.styles!.secondaryColor,
              )
            ],
          )
        ],
      ),
    ),
  );
}

Widget _content3() {
  return Container(
    padding: EdgeInsets.symmetric(
      vertical: StructureBuilder.dims!.h0Padding,
      horizontal: StructureBuilder.dims!.h0Padding,
    ),
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Image.asset(
                "assets/images/img1.jpg",
                width: StructureBuilder.dims!.h0Padding * 5,
                height: StructureBuilder.dims!.h0Padding * 5,
                fit: BoxFit.cover,
              ),
              EsHSpacer(),
              Image.asset(
                "assets/images/img2.jpg",
                width: StructureBuilder.dims!.h0Padding * 5,
                height: StructureBuilder.dims!.h0Padding * 5,
                fit: BoxFit.cover,
              ),
              EsHSpacer(),
              Image.asset(
                "assets/images/img3.jpg",
                width: StructureBuilder.dims!.h0Padding * 5,
                height: StructureBuilder.dims!.h0Padding * 5,
                fit: BoxFit.cover,
              ),
            ],
          ),
          EsVSpacer(),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.access_time,
                size: StructureBuilder.dims!.h3IconSize / 2,
                color: StructureBuilder.styles!.secondaryColor,
              ),
              EsHSpacer(),
              EsLabelText(
                "20.10.2018",
                color: StructureBuilder.styles!.secondaryColor,
              )
            ],
          )
        ],
      ),
    ),
  );
}

List<Widget> _contentList = [
  _content1(),
  _content2(),
  _content3(),
  _content2(),
]; 

            



Process time Line:

It is a process time Line,the timelines package is added in pubspec.yaml 's dependencies and located in: 
es_flutter_component/lib/components/es_timeline/showcase/process_timeline.dart 
and is used as: 

ProcessTimelinePage()

Package delivery time Line:

It is a Status time Line,the timelines package is added in pubspec.yaml 's dependencies and located in: 
es_flutter_component/lib/components/es_timeline/showcase/package_delivery_tracking.dart
and is used as: 

PackageDeliveryTrackingPage()

Status time Line:

It is a Status time Line,the timelines package is added in pubspec.yaml 's dependencies and located in: 
es_flutter_component/lib/components/es_timeline/showcase/timeline_status.dart
and is used as: 

TimelineStatusPage()