（Flutter）进度列表

CODE

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:timeline_tile/timeline_tile.dart';

void main() {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var TimeLineText = [
    [true, false, true, "2025年1月1日前：捉羊"],
    [false, false, true, "2025年1月2日前：捉羊"],
    [false, false, false, "2025年1月3日前：搞发明"],
    [false, false, false, "2025年1月4日前：捉羊"],
    [false, true, false, "2025年1月5日前：搞发明"],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("完成进度"),
      ),
      body: Padding(
        padding: EdgeInsets.only(left: 20),
        child: ListView.builder(
          itemCount: TimeLineText.length,
          itemBuilder: (context, index) {
            return MyTimelineTile(
              isFirst: TimeLineText[index][0] as bool,
              isLast: TimeLineText[index][1] as bool,
              isPast: TimeLineText[index][2] as bool,
              text: TimeLineText[index][3] as String,
            );
          },
        ),
      ),
    );
  }
}

class MyTimelineTile extends StatelessWidget {
  final bool isFirst;
  final bool isLast;
  final bool isPast;
  final String text;

  const MyTimelineTile(
      {Key? key,
      required this.isFirst,
      required this.isLast,
      required this.isPast,
      required this.text})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 150,
      child: TimelineTile(
        isFirst: isFirst,
        isLast: isLast,
        beforeLineStyle:
            LineStyle(color: isPast ? Colors.blue : Colors.blue.shade100),
        indicatorStyle: IndicatorStyle(
          width: 35,
          color: isPast ? Colors.blue : Colors.blue.shade100,
          iconStyle: IconStyle(
            iconData: Icons.done,
            color: isPast ? Colors.white : Colors.blue.shade100,
          ),
        ),
        endChild: Eventcard(
          isPast: isPast,
          text: text,
        ),
      ),
    );
  }
}

class Eventcard extends StatelessWidget {
  final bool isPast;
  final String text;

  const Eventcard({Key? key, required this.isPast, required this.text})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 20, right: 20),
      child: Container(
        height: 100,
        decoration: BoxDecoration(
          color: isPast ? Colors.blue : Colors.blue.shade100,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Padding(
          padding: EdgeInsets.only(left: 15, top: 10, right: 15, bottom: 10),
          child: Text(
            text,
            style: TextStyle(
                color: isPast ? Colors.white : Colors.white, fontSize: 15),
          ),
        ),
      ),
    );
  }
}

预览