CODEWITHSUNDEEP
flutterdart
xenos92
xenos92

Reputation: 351

Flutter design with timeline

I'm trying to make this drawing but I'm struggling.

I don't understand how to make the white block of information dynamic. That is to say that it automatically adapts to the size in height of the elements it contains.

I am for the moment obliged to give a defined height (here 200), I would like the size to be automatic. Moreover if I do not give a defined size my gray line on the left side disappears.

The design :

enter image description here

ListTile(
  title : Column(
    children: [
      Container(
        width: double.infinity,
        child: Row(
          children: [
            Container(
              width: 50,
              alignment: Alignment.center,
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(40),
                    border: Border.all(
                        width: 5,
                        color: Colors.blue,
                        style: BorderStyle.solid
                    )
                ),
              ),
            ),
            Text('9:00 am - 9:15 am')
          ],
        )
      ),
      Container(
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                width : 50,
                alignment: Alignment.center,
                child: IntrinsicHeight(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        color: Colors.grey,
                        width: 3,
                        height : 200 // if I remove the size it desappear
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.symmetric(vertical :10),
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                  color: Colors.white,
                  child: Column(
                    children: [
                      Text('Titre'),
                      Text('Info 1'),
                      Text('Info 2')
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      )
    ],
  ),
),

Upvotes: 0

Views: 6545

Answers (2)

Mukul
Mukul

Reputation: 1155

You can try this package for timelines https://pub.dev/packages/timeline_tile.

This package also automatically Sizes your widget height and width.

And for Automatically Sizing your widgets next time, You could use Expanded widget at most places in your code.

Note: An Expanded widget must be a descendant of a Row, Column, or Flex, So Use it carefully.

Upvotes: 2

Jim
Jim

Reputation: 7601

I think it's much easier with this package, timelines.

TimelineTileBuilder.connected(
            connectionDirection: ConnectionDirection.before,
            itemCount: processes.length,
            contentsBuilder: (_, index) {
              //your Container/Card Content
            },
            indicatorBuilder: (_, index) {
              if (processes[index].isCompleted) {
                return DotIndicator(
                  color: Color(0xff66c97f),
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                    size: 12.0,
                  ),
                );
              } else {
                return OutlinedDotIndicator(
                  borderWidth: 2.5,
                );
              }
            },
            connectorBuilder: (_, index, ___) => SolidLineConnector(
              color: processes[index].isCompleted ? Color(0xff66c97f) : null,
            ),
          ),
        ),

Upvotes: 1

Related Questions