Creare una timeline in Flutter
Le timeline sono oggetti che hanno vari utilizzi di presentazione dati, e possono essere molto comodi.
In Flutter abbiamo il package timelines che ci permette di crearle in maniera facile.
Cominciamo con l'installazione:
flutter pub add timelines
Qui sotto un esempio di codice:
import 'package:flutter/material.dart';
import 'package:timelines/timelines.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Test',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Test Flutter'),
),
body: Center(
child: Timeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.alternating,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Evento $index'),
),
itemCount: 10,
),
theme: TimelineThemeData(
connectorTheme: ConnectorThemeData(
color: Colors.amber.withOpacity(0.5),
),
indicatorTheme: const IndicatorThemeData(
size: 13,
color: Colors.orange
),
),
),
),
);
}
}
Io ho usato il builder.
In più ho modificati un pò lo stile usando TimelineThemeData.
Ovviamente ci sono molte altre opzioni a disposizione.
Enjoy!
dart flutter timeline timelinethemedata
Commentami!