Flutter无需使用任何外部库或包即可创建时间线UI

p4rjhz4m  于 2022-11-25  发布在  Flutter
关注(0)|答案(2)|浏览(151)

我正在尝试创建一个简单的flutter UI,类似于下面的布局。如果不使用任何其他库/包,我将如何创建它?我所看到的所有例子都使用了大量的库。寻找一些如何实现这一点的小例子。
使用软件包的示例:https://pub.dev/packages/timelines

fzsnzjdm

fzsnzjdm1#

有一个名为Stepper的小部件,你可以在官方文档中了解更多信息:https://api.flutter.dev/flutter/material/Stepper-class.html

Stepper(
      currentStep: _index,
      onStepCancel: () {
        if (_index > 0) {
          setState(() {
            _index -= 1;
          });
        }
      },
      onStepContinue: () {
        if (_index <= 0) {
          setState(() {
            _index += 1;
          });
        }
      },
      onStepTapped: (int index) {
        setState(() {
          _index = index;
        });
      },
      steps: <Step>[
        Step(
          title: const Text('Step 1 title'),
          content: Container(
              alignment: Alignment.centerLeft,
              child: const Text('Content for Step 1')),
        ),
        const Step(
          title: Text('Step 2 title'),
          content: Text('Content for Step 2'),
        ),
      ],
    );
dwbf0jvd

dwbf0jvd2#

Nolence提供的UI几乎可以回答这个问题:Flutter: Create a timeline UI
应用后的示例:

Timeline(children: [
              const RightChild(
                asset: 'assets/delivery/order_placed.png',
                title: 'Order Placed',
                message: 'We have received your order.',
              ),
              const RightChild(
                asset: 'assets/delivery/order_confirmed.png',
                title: 'Order Confirmed',
                message: 'Your order has been confirmed.',
              ),
              const RightChild(
                asset: 'assets/delivery/order_processed.png',
                title: 'Order Processed',
                message: 'We are preparing your order.',
              ),
              const RightChild(
                disabled: false,
                asset: 'assets/delivery/ready_to_pickup.png',
                title: 'Ready to Pickup',
                message: 'Your order is ready for pickup.',
              ),
            ],),

class RightChild extends StatelessWidget {
  const RightChild({
    Key? key,
    required this.asset,
    required this.title,
    required this.message,
    this.disabled = false,
  }) : super(key: key);

  final String asset;
  final String title;
  final String message;
  final bool disabled;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: <Widget>[
          Opacity(
            child: Image.asset(asset, height: 50),
            opacity: disabled ? 0.5 : 1,
          ),
          const SizedBox(width: 16),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                title,
                style: GoogleFonts.yantramanav(
                  color: disabled
                      ? const Color(0xFFBABABA)
                      : const Color(0xFF636564),
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                ),
              ),
              const SizedBox(height: 6),
              Text(
                message,
                style: GoogleFonts.yantramanav(
                  color: disabled
                      ? const Color(0xFFD5D5D5)
                      : const Color(0xFF636564),
                  fontSize: 16,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

相关问题