imkcat / timeline_node

A timeline node widget to create timeline layout.
MIT License
13 stars 4 forks source link

the TimeLineNodeStyle no pointType and pointRadius attribute #1

Open bigbirdhzp opened 4 years ago

bigbirdhzp commented 4 years ago

i use the timeline_node version is 0.1.0.The flutter version is 1.9.1+hotfix.4 i use your example code, but found somthing wrong.

image

i check your original code, i find the TimelineNodeStyle class doesn't have the pointType and pointColor attribute. image

Please help me, thanks!

Mapk26 commented 4 years ago

@bigbirdhzp , I tried to use this package and found the same problem.

For who is interested on this project, I suggest to fork this or copy and paste the lib/timeline_node.dart file into his own project instead of importin in pubspec.yaml

Then use like:

return ListView.builder(
            itemCount: meals.length,
            itemBuilder: (context, index){
              return TimelineNode(
                style: TimelineNodeStyle(
                  pointType: TimelineNodePointType.Circle,
                  pointColor: AppColors.darkAccent,
                  lineColor: AppColors.grey,
                  lineType: index==0 ? TimelineNodeLineType.BottomHalf : TimelineNodeLineType.Full,
                ),   
                child: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(meals[index].meals),
                  ),
                ),
              );
            },
          );
anasmuhamad98 commented 4 years ago

Sorry for my English. Actually its because the update. After version 0.1.0. The code for timeline_node.dart got different from the previous version 0.0.2. So if you want to use example code I recommend for you either to install the version 0.0.2 or just copy and paste this code to your timeline_node.dart

import 'package:flutter/material.dart';

enum TimelineNodeType { Left, Right } enum TimelineNodePointType { None, Circle } enum TimelineNodeLineType { None, Full, TopHalf, BottomHalf }

class TimelineNodeStyle { TimelineNodeType type; TimelineNodePointType pointType; Color pointColor; double pointRadius; TimelineNodeLineType lineType; Color lineColor; double lineWidth; double preferredWidth;

TimelineNodeStyle( {this.type = TimelineNodeType.Left, this.pointType = TimelineNodePointType.None, this.pointColor = Colors.blue, this.pointRadius = 6, this.lineType = TimelineNodeLineType.None, this.lineColor = Colors.blue, this.lineWidth = 2, this.preferredWidth = 50}); }

class TimelineNode extends StatefulWidget { final TimelineNodeStyle style; final Widget child;

TimelineNode({Key key, this.style, this.child}) : super(key: key);

_TimelineNodeState createState() => _TimelineNodeState(); }

class _TimelineNodeState extends State { Widget layout() { Widget nodeLine = Container( width: this.widget.style.preferredWidth, height: double.infinity, child: CustomPaint( painter: TimelineNodeLinePainter(style: this.widget.style), ), ); Widget nodeContent = Expanded(child: this.widget.child); List nodeRowChildren = []; switch (this.widget.style.type) { case TimelineNodeType.Left: nodeRowChildren.add(nodeLine); nodeRowChildren.add(nodeContent); break; case TimelineNodeType.Right: nodeRowChildren.add(nodeContent); nodeRowChildren.add(nodeLine); break; } return IntrinsicHeight( child: Row( children: nodeRowChildren, ), ); }

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

class TimelineNodeLinePainter extends CustomPainter { TimelineNodeStyle style;

TimelineNodeLinePainter({this.style});

@override void paint(Canvas canvas, Size size) { Paint linePaint = Paint(); linePaint.color = this.style.lineColor; linePaint.strokeWidth = this.style.lineWidth; switch (this.style.lineType) { case TimelineNodeLineType.None: break; case TimelineNodeLineType.Full: canvas.drawLine(Offset(size.width / 2, 0), Offset(size.width / 2, size.height), linePaint); break; case TimelineNodeLineType.TopHalf: canvas.drawLine(Offset(size.width / 2, 0), Offset(size.width / 2, size.height / 2), linePaint); break; case TimelineNodeLineType.BottomHalf: canvas.drawLine(Offset(size.width / 2, size.height / 2), Offset(size.width / 2, size.height), linePaint); break; }

Paint pointPaint = Paint();
pointPaint.color = this.style.pointColor;

switch (this.style.pointType) {
  case TimelineNodePointType.None:
    break;
  case TimelineNodePointType.Circle:
    canvas.drawCircle(Offset(size.width / 2, size.height / 2),
        this.style.pointRadius, pointPaint);
    break;
}

}

@override bool shouldRepaint(TimelineNodeLinePainter oldDelegate) => false;

@override bool shouldRebuildSemantics(TimelineNodeLinePainter oldDelegate) => false; }