How to put text + icon as stepper's step title in flutter

Question

I am new in flutter. I want to put icon with title text in step of stepper. so, anyone know how to implement this please tell me. Thanks in advance

NOTE: I don't want to change icon that shows in step number but i want add another icon after the title text.

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

  }
}

I tried wrap Text widget with Row widget but not work.

Answer 1

Stack(
    children: [
      Container(
        margin: const EdgeInsets.only(left: 24, top:2),
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
        decoration: shown
            ? const BoxDecoration(
                border: Border(
                    left: BorderSide(
                width: 2,
                color: Color(0xFFDDDDDD),
              )))
            : null,
        child: Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: Text(txt,
                style: const TextStyle(
                  color: Color(0xFF1A1A1A),
                  fontWeight: FontWeight.w400,
                  fontSize: 13.0,
                ))),
      ),
      const SizedBox(
        height: 0,
        width: 50,
        child: Icon(Icons.circle, color: Color(0xFF222222), size: 16),
      ),
    ],
  )

Answer 2

You can't use a Row because the constructor isn't a constant constructor. The title property of the step widget needs a const constructor.

I did what you want, check the code below and the output.

Try the code below, it works perfectly:

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

OUTPUT: