如何在flutter中實現這個設計？

Question

我想做一個類似這樣的設計，但我不知道如何實現這個設計？

Answer 1

您可以使用步進器 class 或為此創建自己的小部件。 查看以下代碼以實現：

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentStep = 0;
  List<Map<String, String>> list = [
    {
      'date': '09.30AM',
      'title': 'Order Placed',
      'sub': 'Your order #212423 was placed for delivery'
    },
    {'date': '09.35AM', 'title': 'Pending', 'sub': 'Your order is pending for confirmation'},
    {'date': '09.55AM', 'title': 'Confirmed', 'sub': 'Your order is confirmed'},
    {
      'date': '10.30AM',
      'title': 'Processing',
      'sub': 'Your product is processing to de'
    },
    {'date': '10.45AM', 'title': 'Delivered', 'sub': 'Product delivered to you'},
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          ListView.separated(
            itemCount: list.length,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return currentStep >= index ? Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: EdgeInsets.only(top: 5),
                    child: Text(list[index]['date']!),
                  ),
                  const SizedBox(width: 25),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Icon(Icons.check_circle, color: Colors.green),
                      const SizedBox(height: 5),
                      index < list.length - 1 ? Container(
                          height: 50,
                          width: 1,
                          color: Colors.green
                      ) : Container(),
                    ],
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 2),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(list[index]['title']!, style: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold
                          ),),
                          Flexible(child: Text(list[index]['sub']!)),
                        ],
                      ),
                    ),
                  ),
                ],
              ) : Container();
            }, separatorBuilder: (BuildContext context, int index) {
              return const SizedBox(height: 10);
          },
          ),
          ElevatedButton(onPressed: () {
            setState(() {
              currentStep += 1;
            });
          }, child: const Text('Change Step'))
        ],
      ),
    );
  }
}

Answer 2

這是代碼

import 'package:flutter/material.dart';

class StepperScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          children: [
            stepperDesign(context, '9:30 AM', "Tour order #123456 was placed for delivery", 'Order Placed'),
            stepperDesign(context, '9:35 AM', "Your Order is pending for Confirmation. Will confirm Within 5 minutes", 'Pending'),
            stepperDesign(context, '9:55 AM', "Your order is confirmed. Delivered soon within 20 minutes", 'Confirmed'),
            stepperDesign(context, '10:30 AM', "Your product is processing to deliver you soon", 'Processing'),
            stepperDesign(context, '10:30 AM', "Product deliver to you and marked as deliver by customer", 'Delivered'),
          ],
        ),
      ),
    );
  }

  stepperDesign(BuildContext context, String time, String message, String orderStatus) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: MediaQuery.of(context).size.width*0.15,
              child: Text(time, style: TextStyle(fontSize: 16))
            ),
            Container(
              width: MediaQuery.of(context).size.width*0.15,
              child: CircleAvatar(
                radius: 14,
                backgroundColor: Colors.green,
                child: Center(
                  child: Icon(Icons.done, color: Colors.white,),
                ),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width*0.6,
              child: Text(orderStatus, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),)
            ),
          ],
        ),
        Row(
          children: [
            Container(width: MediaQuery.of(context).size.width*0.15,),
            SizedBox(
              width: MediaQuery.of(context).size.width*0.15,
              child: Center(
                child: Container(
                  color: Colors.grey,
                  height: 50,
                  width: 2,
                ),
              ),
            ),
            Container(
                height: 70,
                width: MediaQuery.of(context).size.width*0.6,
                child: Text(message, style: TextStyle(fontSize: 16),)
            ),
          ],
        ),
      ],
    );
  }
}

Answer 3

試試這些步進器包。 他們可能會幫助您實現這一目標。

https://pub.dev/packages/im_stepper

或者

https://pub.dev/packages/step_progress_indicator