如何将文本+图标作为步进的步骤标题放在拍子中

Question

我是新手。我想将带有标题文本的图标放在步进器中。所以，任何人都知道如何实现这一目标，请告诉我。在此先感谢

注意：我不想更改在步骤号中显示的图标，但是我想在标题文本之后添加另一个图标。

import 'package:flutter/material.dart';

class CreateProject extends StatefulWidget {
  CreateProject({Key key}) : super(key: key);

  @override
  _CreateProjectState createState() => _CreateProjectState();
}

class _CreateProjectState extends State<CreateProject> {

  @override
  Widget build(BuildContext context) {
    return Stepper(
    currentStep: 3,
    controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
    return Row(
        children: <Widget>[
            Container(
                child: null,
            ),
            Container(
                child: null,
            ),
        ],
    );
},

    steps: const <Step>[
      Step(
        title: Text('Step 1'), //here, I want to put one icon with the title text 
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 2'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 3'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 4'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
    ],
  );

  }
}

我尝试用行小部件包装文本小部件，但不起作用。

Answer 1

您不能使用Row，因为构造函数不是常量构造函数。 title小部件的step属性需要一个const构造函数。

我做了您想要的，检查下面的代码和输出。

尝试下面的代码，它可以正常工作：

Stepper(
      currentStep: 3,
      controlsBuilder: (BuildContext context,
          {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: <Widget>[
            Container(
              child: null,
            ),
            Container(
              child: null,
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 1'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 2'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 3'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 4'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
      ],
    );

输出：