Скачать timeline_list - загрузка исходного кода timeline

timeline_list

Данные веб-сайта

1.0.0

Скачать

Флэттер -виджет временной шкалы

Высокий настраиваемый виджет трепетания для отображения вертикальных временных шкал с пользовательскими маркерами, значками и гибкими параметрами позиционирования.

Скриншот списка графиков Flutter

Предупреждение

? Документация была создана с использованием LLMS. Если вы заметили какие -либо ошибки или опечатки, пожалуйста, отправьте запрос на вытяжку или создайте проблему.

Функции

Три положения временных шкал: start (слева), center или end (справа)
? Полностью настраиваемые маркеры с любым виджетом в качестве контента или значка
? Гибкое выравнивание значков: top , center или bottom маркеров
Индивидуальное позиционирование маркера для центрированных сроков
Поддержка обратного заказа временной шкалы
Пользовательская физика прокрутки и поддержка контроллера

Установка

Добавьте это в файл pubspec.yaml от вашего пакета:

 dependencies :
  timeline_list : ^0.1.0

Использование

Простая временная шкала

Скриншот с разветвленным списком простых временных шкал

 import 'package:timeline_list/timeline_list.dart' ;

Timeline (
  children : [
    Marker (child : Text ( "Step 1" )),
    Marker (child : Text ( "Step 2" )),
    Marker (child : Text ( "Step 3" ))
  ],
)

Пример взимания

Вот более продвинутый пример, показывающий временную шкалу адаптации с пользовательскими значками:

Скриншот с временной шкалой разветвления.

 var checkIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .green),
    child : Icon ( Icons .check, color : Colors .white, size : 12 ));
var emptyIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .grey));
return Scaffold (
    appBar : AppBar (title : const Text ( "Onboarding example" )),
    body : Column (children : [
      Timeline . builder (
        context : context,
        markerCount : 10 ,
        properties : TimelineProperties (
            iconAlignment : MarkerIconAlignment .center,
            iconSize : 16 ,
            timelinePosition : TimelinePosition .start),
        markerBuilder : (context, index) => Marker (
          child : Padding (
            padding : const EdgeInsets . all ( 8.0 ),
            child : Text ( "Step ${ index + 1 }" ),
          ),
          icon : index >= 8 ? emptyIcon : checkIcon,
          position : MarkerPosition .left,
        ),
      ),
    ]));

Настройка

Свойства временной шкалы

timelinePosition : контролирует общее положение временной шкалы ( start , center , end )
iconAlignment : устанавливает выравнивание значков по сравнению с содержанием маркера
iconSize : определяет размер значков маркеров
lineWidth : устанавливает ширину соединительных линий
lineColor : настраивает цвет соединительных линий
itemGap : контролирует расстояние между маркерами
iconGap : устанавливает разрыв между содержанием значков и маркера