Как поместить текст + значок в качестве заголовка шага во флаттере

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,
        ),
      ),
    ],
  );

  }
}

Я пробовал обернуть текстовый виджет виджетом Row, но не работал.

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,
          ),
        ),
      ],
    );

ВЫХОД: